javascript - Redux Store 的结构应该是什么？

Question

Redux.org告诉你的状态正常化，但它会造成一些困惑。

它告诉我们应该有以下格式的状态:

{
    simpleDomainData1: {....},
    simpleDomainData2: {....},
    entities : {
        entityType1 : {....},
        entityType2 : {....}
    },
    ui : {
        uiSection1 : {....},
        uiSection2 : {....}
    }
}

我可以通过两种方式实现。

案例 1:我有 3 个页面，主页、创建、提要页面。因此我可以创建 homeReducer.js、createReducer.js、feedsReducer.js，每个 reducer 都有 simpleDomainData1、simpleDomainData2、entities、ui。

案例 2:我可以为每个字段创建单独的 reducer，例如 simpleHomeReducer.js、simpleCreateReducer.js、simpleFeedsReducer.js、entitiesReducer、uiReducer.js。

但我不明白，哪种方法是正确的，为什么？

Answer 1

嘿，kiran，正如您提到的那样，您有 2 种方法来构建 reducer 。

但是，我会给你一个新的方法。

First of all it's sounds tricky but once you think a little it ispiece of cake for this project and future once also.

You should use combineReducers to combine your reducers to make it easy to use.

1. uiReducer

首先你应该为uiSection1创建reducer，你的所有逻辑都来自home Component，只为uiSection1创建Component和feeds Component。

就像您创建 uiSection2 reducer ，并在其中创建与 uiSection2 相关的所有页面的所有组件逻辑。

现在将这 2 个 reducer 合并为一个 reducer uiReducer。

<强>2。 entityReducer

现在，entityType 也是如此。创建 2 个 entityType reducer 并将它们组合成一个 enitityReducer。

3. domainDataReducer

现在为域数据创建每个reducer，并将其合并为1个reducer domainDataReducer

现在你有 3 个 reducer ui、entity 和 domainData。

4. rootReducer

现在，将这 3 个 reducer 组合成 1 个 reducer rootReducer 并将其传递给 index.js

And one last thing, you should do a seperate logic for all yourreducer action. And in this reducer action you can do api call tobackend as well.

This is the link to youtube video by TheNetNinja