使用多个reducers的Redux

Question

我正在制作一个react/redux应用程序来显示食谱。当应用程序加载时，我加载来自所有用户的前10个，就像一个提要。我想为个人用户做一个页面，显示他们所有的食谱。

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

制作一个只显示用户菜谱的新的reducer是不是一种糟糕的做法？这似乎是我唯一的选择。因此，我将为我的主提要设置一个reducer，然后在单击用户页面时使用一个reducer，并按用户id显示所有食谱。

这是我当前不能工作的reducer：

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

您可以在一个对象中拆分您的reducer状态，如下所示：

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，那么请坚持使用第一个选项。状态规范化非常强大，绝对值得学习，但并不总是最佳选择，这取决于您的用例。