React-Redux 是一种用于构建 React 应用程序的库，它结合了 React 和 Redux 的功能。在 React-Redux 中，Provider 和 Connect 是两个重要的概念。Provider 是一个 React 组件，它允许我们将 Redux 存储库注入到 React 组件树中。而 Connect 是一个高阶组件，它允许我们将 Redux 存储库中的数据和操作映射到 React 组件的 props 中。
Provider 的使用
Provider 是 React-Redux 库中的一个组件，它被用来将 Redux 存储库注入到 React 组件树中。Provider 接收一个名为 store 的 prop，它是一个 Redux 存储库。我们可以使用 Provider 组件将 store 注入到 React 应用程序中的任何组件中。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的代码中，我们将 store 作为 prop 传递给 Provider 组件，并将 App 组件作为 Provider 的子组件。这样，App 组件以及它的子组件都可以通过 Connect 访问存储库中的数据和操作。
Connect 的使用
Connect 是一个高阶组件，它允许我们将 Redux 存储库中的数据和操作映射到 React 组件的 props 中。Connect 接收两个参数：mapStateToProps 和 mapDispatchToProps。mapStateToProps 是一个函数，它将存储库中的状态映射到组件的 props 中。mapDispatchToProps 是一个函数，它将存储库中的操作映射到组件的 props 中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
-------- -------------- -
------ -
-----
----------------------
------- --------------------------------------------
------- --------------------------------------------
------
--
-
-------- ---------------------- -
------ -
------ -----------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
--
-
------ ------- ------------------------ -----------------------------在上面的代码中，我们定义了 Counter 组件，并使用 connect 高阶组件将它连接到 Redux 存储库中。mapStateToProps 函数将存储库中的状态映射到组件的 props 中。mapDispatchToProps 函数将存储库中的操作映射到组件的 props 中。最后，我们将 Counter 组件包装在 connect 函数中，并导出连接后的组件。
Provider 和 Connect 的原理
Provider 组件的原理很简单。它使用 React 的上下文功能将 Redux 存储库传递给 React 组件树中的所有组件。这样，每个组件都可以访问存储库中的数据和操作。
Connect 组件的原理也很简单。它使用 React 的上下文功能获取存储库，并将 mapStateToProps 和 mapDispatchToProps 函数应用于存储库中的数据和操作。然后，它将映射后的数据和操作传递给组件的 props 中。
总结
在 React-Redux 中，Provider 和 Connect 是非常重要的概念。Provider 允许我们将 Redux 存储库注入到 React 组件树中，而 Connect 允许我们将存储库中的数据和操作映射到 React 组件的 props 中。理解 Provider 和 Connect 的使用和原理，能够帮助我们更好地使用 React-Redux 构建应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658a8413eb4cecbf2dfb7829