javascript - 将 Redux 状态传递给组件时的最佳实践

标签 javascript reactjs redux

我正在与其他几个开发人员一起开发一个 React + Redux 项目,但我们无法就在何处传递状态和操作的最佳实践达成一致。

我的方法是拥有一个“容器”或“提供者”组件,它是父组件,所有必需的状态和操作都映射到状态并向下传递到子组件,从而创建单一的真实来源。然而不利的一面是,您必须记住通过每个子组件向下传递操作和值,这可能很难遵循。

另一种开发人员方法是在每个需要它的组件上,在堆栈中的任何位置使用 mapStateToProps。因此,如果向下三层或四层的子组件需要特定状态,他将在该组件上使用 mapStateToProps。他还会使用 import 关键字直接导入 Action 创建器,而不是将它们称为 Prop 。我不喜欢这种方法,因为您可能会多次注入(inject)状态,并且无法在一个地方快速切换状态或操作。

我可以看到这两种方法都有其优点和后备方案,所以我只是想知道是否有关于何时何地将状态/ Action 注入(inject) React 组件堆栈的明确最佳实践。

最佳答案

我在一个相对较大的 Redux 代码库上工作,我们选择的方法是您在 containers 组件上使用 mapStateToProps 的第二种方法,该组件分派(dispatch)操作并将渲染委托(delegate)给愚蠢的组件

您希望能够在许多地方重用它们而不必传递状态。您的顶级 redux 状态仍然是真相的来源,但 mapStateToProps 将允许您仅访问此容器中您需要的部分状态。

Redux 文档做得非常好,检查一下,它推荐容器组件实现 mapStateToProps http://redux.js.org/docs/basics/UsageWithReact.html

关于javascript - 将 Redux 状态传递给组件时的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44279567/

相关文章:

javascript - 在 React/Redux 中更改 url

javascript - 从关联数组中删除条目 (JavaScript)

Javascript - 在没有 eval() 的情况下分配动态值

reactjs - 如何实现 Cypress v10 session() 来保留最初不可用的 cookie

javascript - React 门户弹出窗口变量

reactjs - React hooks : are they useful for shared state management, 例如终极版?

javascript - 在 React/Redux 中过滤数组元素

javascript - Meteor JS 中 Atmosphere JS 的模板

javascript - 如何从另一个类创建一个对象,并将其插入状态数组?

reactjs - Babel 加载器问题 "You may need an additional loader to handle the result of these loaders" `/@react-spring/web/dist/`