在 Redux 中，Context 是一个非常重要的概念。它可以让你跨越组件树访问 store，这在一些情况下非常有用，比如在使用多个 Redux store 的情况下。
Context 是什么
Context 是 React 中的一个 API，它提供了一种在组件树中共享数据的方式，避免了 Props 层层传递的繁琐。它需要在一个组件上面调用 createContext 来创建一个 context 对象，然后这个上下文对象可以被这个组件下面的所有子孙组件使用。
Redux 中的 Context
Redux 中的 Context 是一个用于向下传递 store 的 React 内置的上下文对象（context object）。
React 组件树中的所有组件都可以访问该 Context，也就是说我们可以在子组件中使用 context 访问 Redux 的 store，无需将 store 逐级传递给下层组件。
Redux 中的 Context 在使用时，需要用到两个 React 组件 API，分别是 Provider 和 connect。
Provider
Provider 是一个 React 组件，它接受一个 Redux store 作为属性，并使该 store 在组件树中的所有组件中可用。
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ----------- ---- -------------
------ --- ---- --------
----- ----- - -------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的示例中，我们创建了一个 Redux store，通过 Provider 把它传递给了 App 组件。
connect
connect 是一个高阶函数，它用来连接 Redux store 和 React 组件。connect 接受两个参数，分别是 mapStateToProps 和 mapDispatchToProps，它们分别定义了如何把 Redux store 映射到 React 组件的 props 和如何把用户操作映射成发出 Redux action。
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- - -- ------ --------- -- -- -
------ -
-----
--------- -----------
------- --------------------------------------
------
--
--
----- --------------- - ----- -- -
------ -
------ -----------
--
--
----- ------------------ - -------- -- -
------ -
---------- -- -- -
---------- ----- ----------- ---
-
--
--
------ ------- --------
----------------
------------------
-----------在上面的示例中，我们通过 connect 把 Redux store 的 count 属性映射到了 Counter 组件的 props 中，并把 increment 函数映射成了 dispatch 一个 INCREMENT action 的函数。
使用 Context 访问 Redux store
在 Redux 中，如果我们想在子组件中访问 store，我们需要通过 Provider 把 store 放到组件树的 context 中，然后在子组件中使用 connect 把 Redux store 和组件连接起来。
------ ----- ---- --------
------ - ------- - ---- --------------
----- ---- - -- ---- -- -- -
------ -
-----
-------- ----------
------
--
--
----- --------------- - ----- -- -
------ -
----- ---------------
--
--
------ ------- -------------------------------在上面的示例中，我们创建了一个 User 组件，它通过 mapStateToProps 把 Redux store 中的 user 名称映射到了组件的 props 中。然后在组件中就可以直接使用这个 props 访问 user 名称了。
总结
Redux 中的 Context 对象可以让我们在 React 组件树中共享 store，避免了 Props 传递的繁琐，大大增加了代码的可读性和可维护性。使用 Redux 中的 Context，我们可以更方便地访问 Redux store，简化了开发过程中的繁琐细节，提高了代码的效率和可重用性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e6bc12f6b2d6eab3215058