现在让我们看看大致的流程：
- React 可以触发 Action，比如按钮点击按钮。
- Action 是对象，包含一个类型以及相关的数据，通过 Store 的
dispatch()函数发送到 Store。 - Store 接收 Action 的数据并将其连同当前的
state树（state树是包含所有state的一种特殊的数据结构，是一个单一的对象）发给 Reducer。 - Reducer 是一个多个函数的合成函数（当然一般都是），它接收一个之前的
state和一个 Action；并基于此 Action 将会产生的影响，返回一个新的state。一个 app 可以包含一个 Reducer，但大部分的 app 最后会包含多个，每个处理state中不同的部分，下文 会提到。 - Store 接收到新的
state，并替换当前的。 - 当
state变化时，Store 触发 事件。 - 任何 订阅了事件 的组件 从 Store 中提取新的
state。 - 组件使用新的
state进行更新。
简单起见，这个流程可用下图表示：
你可以看到数据随着一个很清晰的单项路径流动，没有重叠，没有反方向的数据流。这图也展示了 app 的每一部分可以多么清晰地分开：
- Store 只关心所只有的
state； - View 中的组件，只关心显示数据和触发 Action；
- Action 只关注
state中的某些数据发生变化了，并包含了这些数据； - Reducer 只关注旧的状态并将 Action 放入到
state中。
一切都是模块化的，非常优雅。当阅读这样的代码的时候，表意非常明显，很容易理解。
推荐网站：https://f8-app.liaohuqiu.net/tutorials/building-the-f8-app/data/
时间： 2024-10-10 01:46:00