Question

我正在制作一个显示食谱的react / redux应用程序。当应用加载时，我从所有用户加载前10个，如Feed。我想为显示所有食谱的个人用户创建一个页面。

当我访问他们的页面时，我尝试更改redux商店以返回所有用户食谱，但当我回到主要供稿时，我必须再次更改商店（所有用户中的前10名）。这改变了＆＃39; GET_RECIPES＆＃39;到＆＃39; GET_USER_RECIPES＆＃39;导致我出现问题，因为我一次加载10个，我需要返回...状态+新加载的食谱。

制作一个只显示用户配方的新减速机是不好的做法。这似乎是我唯一的选择。所以我会为我的主要Feed提供一个reducer，然后在我点击一个用户页面时显示一个reducer，并按用户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

您可以将对象中的reducer状态拆分为：

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

那么你的减速机就可以这样工作：

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

Redux使用多个Reducer

1 个答案: