reactjs - Redux actions/reducers 与直接设置状态

Question

我是 Redux 新手。我无法理解操作和 reducer 与直接修改存储的组件的值(value)。

在 Redux 中，您的 React 组件不会直接更改存储。相反，他们发送一个 Action ——有点像发布一条消息。然后，reducer 处理该操作(有点像消息订阅者)并更改状态(更准确地说，创建一个新状态)作为响应。

我觉得类似 pub/sub 的交互增加了间接层，这使得理解码件实际上在做什么变得更加困难——为什么不允许组件直接将新状态传递到 Redux 存储呢？将诸如 this.props.setReduxState 之类的东西注入(inject)到 React 组件中会是一件坏事吗？

我开始理解为什么状态本身需要不可变的值(value)(相关问题 - Isn't Redux just glorified global state? )，与检查更新以查看哪些组件 Prop 需要更新以响应状态更改有关。我的问题是额外的操作/ reducer 层与直接操作存储。

Answer 1

当我决定深入 Redux 兔子洞时，我遇到了一些非常类似的问题。就我而言，我仅使用 React 内部状态来开发相对较小的应用程序和组件，但它仍然工作得很好。只有当应用程序和组件数量变得越来越大时，setState 才变得有些笨拙。

我认为这一点没有得到足够的重视 - 如果您正在开发一个相对较小的应用程序或一些在没有强大的不可变存储解决方案的情况下很容易跟踪的组件，那么您并不总是需要使用 Redux 。刚开始就有很多必要的样板，在某些情况下可能会过于耗时。

话虽这么说，React + Redux 是一个很好的设计范例，一旦您习惯了它并拥有可以调用的自己的样板，就可以遵循它。 Redux 本质上更喜欢 props 而不是 state，这强制了不可变的设计，因为你(通常)不能改变 props。这使得 Redux DevTools“时间机器”以及您可以像其他人之前提到的那样扔到商店中的所有中间件一起成为可能。

中间件是其中的重要组成部分，特别是随着针对同步和异步任务(例如 redux-saga ( https://redux-saga.js.org/ ))的更精确解决方案的出现。 IMO“thunks”( https://github.com/gaearon/redux-thunk )在您刚开始使用时比 sagas 更容易理解，除非您已经是生成器方面的专家，但 sagas 更可预测，因此从长远来看是可测试的。

因此，您不必为每个组件设置单独的内部状态，而是可以使用一组操作/化简器来代替，因为您知道自己不会错误地改变状态。我发现 ImmutableJS ( https://facebook.github.io/immutable-js/ ) 和 Reselect ( https://github.com/reactjs/reselect ) 的组合，它为您提供了可组合的选择器 - 对此非常有用。不需要 Object.assigns 或大量的扩展运算符，它会为您创建一个新对象。

我不会急于将现有的非 Redux 项目转换为 Redux，工作流程的不同足以导致严重的困惑，但是您很难找到尚未包含的新项目的样板文件Redux 在他们的工作流程中。例如“React Boilerplate”( https://github.com/react-boilerplate/react-boilerplate )，我知道这种方式一开始让我大吃一惊，但绝对值得体验一下。它确实考验你的函数式编程能力。