React with Redux，如何设计我的状态

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 文件中的单个大型存储中使用来自 redux

的 combineReducers() 方法

基本上流程是，

编写单独的小型减速器。
在单个文件中导入所有减速器(index.js)。
使用 combineReducers() 将它们组合成一个大型减速器并将其导出到存储。

希望对您有所帮助！ :)

Answer 3

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

这看起来不错。

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

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

一些小技巧：

将业务逻辑与视图（组件）和缩减程序分开。
确定核心减速器（整个应用程序都需要的）和其他。仅使用核心减速器创建初始存储。
将 reducers 和 action creators 拆分到不同的文件中，并根据需要 lazy load reducers。

React with Redux，如何设计我的状态

React with Redux, how to design my state

state

reactjs

redux