Redux actions/reducers 与直接设置状态

wrs*_*der 6 reactjs redux

我是 Redux 新手。我无法理解操作和减速器与直接修改存储的组件的价值。

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

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

我开始理解为什么状态本身需要不可变的价值(相关问题 - Redux 不是只是美化了全局状态吗?),与检查更新以查看哪些组件 props 需要更新以响应状态变化。我的问题是额外的操作/减速器层与直接操作存储。

JDe*_*518 4

当我决定深入 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),我知道这种方式一开始让我大吃一惊,但绝对值得体验一下。它确实考验你的函数式编程能力。