Question

我的网站有3页，例如www.example.com.au/invoices，www.example.com.au/customers和www.example.com.au/suppliers。

在这种情况下，如何组织全局Redux状态，我的意思是结构。它应该在下面吗？

state = {
    invoices: {
        //invoices related data
    },
    customers: {
        //customers related data
    },
    suppliers: {
        //suppliers related data
    }
}

Answer 1

这看起来不错。我发现尝试保持状态尽可能正常化是个好主意 - 尝试将其视为关系数据库。

这是一篇很棒的文章： https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44#.9c678jwib

原样 http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html

Answer 2

由您决定如何存储。但是更方便的方法是为每个文件分别创建一个文件并将它们组合成一个商店。

即你的文件夹结构看起来像这样，

reducers/
    |---- index.js
    |---- customers.js
    |---- invoices.js
    |---- suppliers.js

在customers.js，invoices.js和suppliers.js中的每一个内部，在每个中编写自己的reducer并使用{将它们合并到index.js文件中的单个大型商店来自combineReducers()

的{1}}方法

基本上是流程，

写出单独的小型减速器。
将所有Reducer导入单个文件（redux）。
使用index.js将它们合并为一个大型reducer并将其导出到store。

希望它有所帮助！：）

Answer 3

state = {
    invoices: {
        //invoices related data
    },
    customers: {
        //customers related data
    },
    suppliers: {
        //suppliers related data
    }
}

看起来不错。

如果您在invoices页面上，并且不会访问state.suppliers或state.customers，则您无需combineReducers 1}}所有这些都在一起。

您可以延迟加载缩减器（动态地使用store.replaceReducer将它们注入商店）。这节省了一些字节;）

一些提示：

将业务逻辑与视图（组件）和reducer分开。
识别核心缩减器（整个应用程序需要的那些）和其他人。仅使用核心reducer创建初始存储。
根据需要将缩减器和动作创建器拆分为不同的文件和延迟减载器。

与Redux反应，如何设计我的状态

3 个答案: