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

redux.js.org 上有很多关于此的信息，例如 basic reducer:

First and foremost, it's important to understand that your entire application really only has one single reducer function: the function that you've passed into createStore as the first argument.

和splitting reducer logic：

For any meaningful application, putting all your update logic into a single reducer function is quickly going to become unmaintainable.

这些页面甚至解释了拆分 reducer 逻辑的各种技术。没有破坏 reducer 的“标准”方法，因此假设您遵循 redux reducer 的所有其他规则，您的两个选项都是可以接受的。

我的看法

如果你的 reducer 每页都比较简单，那么选择选项一。类似于在每个页面上操作 ui、entities 和 simpleData 的一些操作。否则，如果您对数据段有很多操作，请将它们拆分到它们自己的缩减器中，如您在选项二中所示。例如，许多单独操作 ui、entities 或 simpleData.

的操作

Answer 2

嘿 kiran，正如你在问题中提到的，你有 2 种方法来构造你的减速器。

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

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

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

1. ui减速机

首先，您应该为 uiSection1 创建 reducer，在其中您拥有来自 home 组件的所有逻辑，仅为 uiSection1 创建组件和 feeds 组件。

就像您创建 uiSection2 reducer 并在其中创建与 uiSection2.

相关的所有页面的所有组件逻辑

现在将这 2 个减速器合并为一个减速器 uiReducer。

2。 entityReducer

现在，对 entityType 做同样的事情。创建 2 个 entityType reducer 并将它们合并为一个 enitityReducer.

3。 domainDataReducer

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

现在你有 3 个减速器 ui、实体和域数据。

4. rootReducer

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

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

This is the link to youtube video by TheNetNinja

Redux Store 的结构应该是什么？

What should be structure of Redux Store?

javascript

reactjs

redux

store

reducers