javascript - redux、react-redux、redux-thunk 之间有什么区别？

Question

我正在使用 React + Flux。我们的团队正计划从 flux 转向 redux。来自 Flux 世界的我对 Redux 感到非常困惑。在 flux 控制流中很简单，从组件 -> 操作 -> 存储和存储更新组件。它简单明了。

但在 redux 中它令人困惑。这里没有商店，是的，有一些不使用商店的例子。我看了几个教程，似乎每个人都有自己的实现方式。有些正在使用容器，有些则没有。 (我不知道这个 Container 概念，也无法理解 mapStateToProps、mapDispatchToProps 的作用)。

1. 谁能清楚地解释一下 redux 中的控制流是如何发生的？
2. components/containers/actions/action creators/store 在 redux 中的作用是什么？
3. redux/react-redux/redux-thunk/其他之间的区别??
4. 如果您可以发布指向任何简单而精确 redux 教程的链接，那将会非常有帮助。

Answer 1

1. Can someone clearly explain how control flow happens in redux ?

Redux(总是)只有一个商店。

1. 每当您想要替换商店中的状态时，您都可以发送一个操作。

2. Action 被一个或多个 reducer 捕获。

3. reducer/s 创建一个结合旧状态和分派(dispatch)操作的新状态。

4. 商店订阅者会收到新状态的通知。

2. What are roles of components/containers/actions/action creators/store in redux ?

• Store - 保存状态，当新 Action 到达时运行 dispatch -> middleware -> reducers 管道，并在状态被新状态替换时通知订阅者。

• 组件 - 不直接了解状态的哑 View 部分。也称为展示组件。

• 容器 - 使用 react-redux 了解状态的 View 片段。也称为智能组件和高阶组件

---

请注意，容器/智能组件与dumb组件只是构建应用的好方法。

---

• 操作 - 与通量相同 - 具有类型和负载的命令模式。

• Action creators - 创建 Action 的 DRY 方式(并非绝对必要)

3. Difference between redux/react-redux/redux-thunk/any others ?

• redux - 单一商店的流动性，可用于您喜欢的任何环境，包括 Vanilla js、 react 、 Angular 1/2 等...

• react-redux - redux 和 React 之间的绑定(bind)。图书馆提供了一套 react hooks - useSelector() 和 useStore() 从存储中获取数据，useDispatch() 调度操作。您还可以使用 connect()创建 HoC(高阶组件)的函数，监听商店的状态变化，为包装组件准备 Prop ，并在状态变化时重新渲染包装组件。

• redux-thunk - 允许您编写返回函数而不是 Action 的 Action 创建器的中间件。 thunk 可用于延迟 Action 的发送，或仅在满足特定条件时才发送。主要用于对 api 的异步调用，即在成功/失败时分派(dispatch)另一个操作。

4. It would be very helpful if you can post links to any simple andprecise redux tutorials.

• Redux official docs

• Getting Started with Redux

• Building React Applications with Idiomatic Redux

• Presentational and Container Components