Redux 使用多个 reducer

Question

我正在制作一个显示食谱的 react/redux 应用程序。当应用程序加载时，我会从所有用户中加载前 10 个，例如提要。我想为个人用户制作一个页面，显示他们所有的食谱。

当我访问他们的页面时，我尝试更改 redux 商店以返回所有用户食谱，但是当我返回主提要时，我必须再次更改商店（所有用户的前 10 个）。这种从 'GET_RECIPES' 到 'GET_USER_RECIPES' 的变化给我带来了问题，因为我一次加载 10 个，我需要返回 ...state + 新加载的食谱。

制作一个只显示用户食谱的新减速器是不好的做法。这似乎是我唯一的选择。因此，我的主要提要有一个减速器，然后当我单击用户页面并按用户 ID 显示所有食谱时使用一个减速器。

这是我目前无法使用的减速器：

const recipesReducer = (state = [], action) => {
    switch (action.type) {
        case 'GET_RECIPES':
            return [...state, ...action.payload];  //PROBLEMS
        case 'POST_RECIPE':
            return [...state, action.payload];
        case 'GET_USER_RECIPES':
            return [...action.payload]
        default:
            return state
    }
}

export default booksReducer;

Answer 1

您可以将减速器状态拆分为一个对象，如下所示：

const initialState = {
  recipes: [],
  userRecipes: []
}

那么你的 reducer 就可以这样工作了：

const recipesReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'GET_RECIPES':
            return {...state, recipes: action.payload};
        case 'GET_USER_RECIPES':
            return {...state, userRecipes: action.payload}
        default:
            return state
    }
}

但是，让我们向您介绍一种不同的方法。这被称为规范化你的 Redux 状态。 Redux documentation 用很好的例子详细解释了这一点。本质上，因为您通常在配方应用程序中拥有的数据类型是关系/嵌套的，您尝试将部分 redux 状态组织为数据库。每种类型的数据，即厨师或食谱，在您所在的州都有自己的部分。这有助于保持您的数据结构“平坦”。

如果您是 React/Redux 的新手，并且这只是一个实验性应用程序，或者您不介意再调用几个 api，那么请坚持第一个选项。状态归一化非常强大，绝对值得学习，但根据您的用例，并不总是最佳选择。