用React Hooks简单代替Redux

内容意在实现小型项目不使用redux下的统一store管理

简要分析

对比一下两者的异同点。

redux

数据流图示：

流程简单的解释为：

1. 视图（页面）触发状态更新动作（dispatch）
2. Store 将当前状态数据和触发修改逻辑发送到 Reducer
3. Reducer 按照预先设计好的逻辑匹配 action 更新状态，返回新的状态
4. 最后 Store 保存最新状态，所有订阅者触发更新

react hooks

基本逻辑和 redux 相同，没有了 redux，就得自行需要替代方案。我们知道Context提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。所以充分利用这一点，做一个简单的逻辑分析：

通过 Context 传递数据，假如能引入一个修改动作，就可以完成简单的全局状态管理了。

在这里使用了两个 React 内置 hooks api

• useContext
• useReducer

useContext提供了获取数据（状态）的能力，简单的说就是让父子组件传值从 props 变成直接取值。可以参考React 官方 ?- useContext学习。

useReducer提供了更新数据（状态）的能力。参考React 官方 ?- useReducer学习。

将每个 Context 数据定义为state和dispatch组合，在子组件中通过useContext得到 Context 并使用该 Context 保存的state，通过dispatch修改状态。

这样就有了一个简单的数据流向：

实现

react-env中，已经添加好了相关内容。

写在文末

本文非原创，在学习过程中参考大佬文章后自行总结。

相关参考：

• https://zhuanlan.zhihu.com/p/66020264
• https://juejin.im/post/5d90a10ff265da5ba273b34f