Redux 管理React Native数据

Posted 2020-10-05 谢玉胜的技术文章

现在让我们看看大致的流程：

• 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/