前言
Redux 是一个很流行的状态管理库，但单纯使用 Redux 的话可能需要写很多重复的代码，而 react-redux 这个库就是用来简化 Redux 在 React 中的使用的。其中 react-redux 中的 Provider 和 connect 组件是非常核心的组件，下面我们来看一下它们的源码解析以及实践。
Provider 组件
Provider 组件是 react-redux 中提供的最核心的组件之一，它用来将 Redux 的 store 注入整个应用的组件树中。
实现方式
Provider 组件最关键的实现方式是利用 React 的 Context 特性。Provider 应该被嵌套在组件树的最顶层，并接收一个 prop——一个名为 store 的 Redux store。
在 Provider 的 construct 中，它会调用 React 的 createContext 方法创建一个 context，然后将 store 放到 context 的 value 中，以便让 connect 中的子组件可以将 state 映射到 props 上。
------ ----- ---- -------
------ - ----------------- - ---- -----------
----- -------- ------- --------------- -
------------------ -
------------
---------- - -----------
-
-------- -
------ -
--------------------------- -------- ------ ---------- ---
---------------------
-----------------------------
-
-
-
------ ------- --------实践
我们可以通过下面的代码使用 Provider，将 store 传入整个应用：
------ ----- ---- -------
------ - ------ - ---- -----------
------ - ----------- - ---- -------
------ - -------- - ---- -------------
------ --- ---- -------
------ ----------- ---- ------------
----- ----- - ------------------------
-------
--------- --------------
---- --
------------
-------------------------------
-connect 组件
connect 组件是 react-redux 提供的负责将 Redux store 中的数据和 React 用于渲染的 props 进行绑定的方法。
实现方式
connect 函数接收两个参数 mapStateToProps 和 mapDispatchToProps。我们可以通过传入这两个函数实现将 state 映射到组件的 props 上。
对于 mapStateToProps 函数，它接收当前的 state，并返回一个对象。这个对象就是我们希望变成 props 的 state 属性。类似的，mapDispatchToProps 函数接收 dispatch 函数并返回一个对象，包含了传递给子组件的 actionCreators。最后，connect 函数会将这些值注入到子组件中，在组件渲染时使用这些 props。
-------- ------------------------ ------------------- -
------ -------- --------------------------------- -
----- ------- ------- --------------- -
-------- -
------ -
----------------------------
--- ----- -- -- -
-----------------
---------------
------------------------------------- ------------
-------------------------------------- ------------
--
--
-----------------------------
-
-
-
------ -------
-
-
------ ------- -------实践
我们可以通过下面的代码来使用 connect，将 state 和 dispatch 映射到组件的 props 中：
------ ----- ---- -------
------ - ------- - ---- -------------
------ - ---------- --------- - ---- -----------
----- ------- ------- --------------- -
-------- -
----- - ------ ---------- --------- - - ----------
------ -
-----
--------------
------- ------------------------------
------- ------------------------------
------
-
-
-
----- --------------- - ----- -- --
------ -----------
--
----- ------------------ - -
----------
---------
-
------ ------- ------------------------ ----------------------------总结
Provider 和 connect 组件都是 react-redux 中非常核心的组件，通过它们我们可以更方便地使用 Redux。对于 Provider，它主要是将 store 注入整个应用的组件树中；对于 connect，它主要是将 Redux store 中的数据和 React 用于渲染的 props 进行绑定。使用 Provider 和 connect，我们可以更便捷地使用 Redux，大大减少了编写重复代码的工作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6527dbc87d4982a6eba7231f