React使用Hooks管理全局State

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

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

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

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

Context提供了一种通过组件树传递数据的方法，而不必在每个级别手动传递道具 。与useContext和useReducer结合使用，可以创建一个全局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被全局访问。

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

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