最佳搭档：useContext + useReducer！

免责声明：

这将是你寻找useContext + useReducer hooks 时所见过的最好的文章之一！

为什么要同时使用 useContext 和 userducer？

原因：为了在组件之间共享状态，即全局状态
管理

在之前的文章中，我们已经了解了如何使用 useContext 和 useReducer hooks。

所以，在这篇文章中，我们将看看如何将它们结合起来使用！

在这个例子中，我们将在组件 A、组件 D 和组件 F 之间共享计数器的状态！

此外，我们示例中的组件层次结构如下：

1）组件 A
2）组件 B -> 组件 D
3）组件 C -> 组件 E -> 组件 F

步骤：

1.)在主目录中创建React 上下文成分

2.) 在主函数中创建 reducer 函数成分

3.) 使用 useReducer 函数。

4.) 使用上下文提供程序发送上下文值

5.) 使用useContext钩子来使用上下文值。

6. 使用调度将操作从组件传递出去。

好了，我们开始吧！

步骤1：创建React 上下文和reducer()函数：

步骤2：在函数式组件中，调用useReducer(reducer,initialState) hook：

在这里，您可以看到我们已经将状态（即计数器）和分发方法作为值传递给了上下文提供程序。

步骤 3：现在，为了访问组件 A、组件 D 和组件 F 中的全局状态，我们需要使用 useContext Hook 来使用 Context Provider 传递的上下文值。

（组件 A）

（组件 D）

（组件 F）

步骤 4：为了通过组件 A、D 和 F 改变全局状态，我们通过调度函数传递了操作（即增加、减少或重置）。

这就是使用useReducer 和 useContext hook管理全局状态所需的一切！

希望对您有所帮助！

欢迎分享您的想法！

祝您编程愉快，谢谢！

-Jayant Khandelwal