React使用Hooks管理全局State

React构建应用程序很灵活,组件化的开发方式更让人惊叹。在开发应用过程中经常会遇到的问题,组件之间需要通信,应用程序各部分之间需要共享状态。

引出本文核心,先要介绍一下Redux

Redux提供了一个集中的,可预测的和不变的存储区,将数据与表示分离开来,可用于服务器端渲染,具有强大的调试工具以及添加中间件的功能。但是它的设计非常严格,需要大量样板代码,实现全局状态管理,Redux可能会显得过于庞大。

通过使用React的Context API并结合Hooks,可以创建一个轻量版的Redux的全局状态管理工具。

Context提供了一种通过组件树传递数据的方法,而不必在每个级别手动传递道具 。与useContextuseReducer结合使用,可以创建一个全局Store管理整个应用程序的状态,并支持方便的方法来更新整个应用程序中的状态,而不管组件树的深度如何。

开始构建Store

store由两个主要成分组成:context和state。可以使用createContext()得到一个Provider来接受value。这个Provider可以包裹整个应用程序。该value就是我们定义的state,我们将与之创建useReducer挂钩。这个钩子接受一个reducer:(state, action) => newState返回新的状态以及一个dispatch函数。reducer定义了一组action以及根据action type来更新状态。

useContext 钩子可以让组件访问全局Store。我们可以创建一个useStore hook,自定义导出我们需要的state和调度方法,就不必后面重复导入Context了。

store的基本模型大概是这样

StoreProvider内部的useReducer处理整个state调度,设置provider value属性,可以让store被全局访问。

1615772071000image.png

然后我们可以使用useStore随处获取store,useStore从store中提取了statedispatch函数。根据需要调用的操作类型传递负载信息。

1615772403000image.png

现在我们的应用程序可以仅用React自带的api来灵活的管理我们的全局状态。

1615772606000image.png

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容