Redux 是一个 JavaScript 应用程序状态管理库，它可以帮助您管理 React 应用程序中的状态。在本教程中，我们将学习如何使用 Provider 和 connect 连接 React 组件和 Redux store。
什么是 Redux？
Redux 是一个用于管理 JavaScript 应用程序状态的库。它遵循单向数据流的模式，其中所有状态都存储在一个中央存储库（称为“store”）中，并且只能通过分发操作（称为“actions”）来更改状态。组件可以从存储库中获取状态并订阅更改，以便在状态更改时自动更新。
Redux 的主要优点是它可以帮助您更好地组织和管理应用程序状态。它还可以使应用程序更易于调试，因为您可以查看所有状态更改的历史记录。
为什么要使用 Provider 和 connect？
在使用 Redux 时，您将需要将存储库连接到 React 组件。这可以通过使用 Provider 和 connect 来完成。
Provider 是一个 React 组件，它将 Redux store 作为 prop 传递给其子组件。这使得所有子组件都可以访问存储库，而不必通过 props 层层传递它们。
Connect 是一个高阶函数，它接受一个 React 组件并返回一个新的组件，该组件具有访问 Redux store 的能力。Connect 还可以将组件与存储库中的特定部分连接起来，以便组件仅在需要时更新。
使用 Provider 和 connect 可以将 Redux store 连接到 React 组件，这是使用 Redux 的关键。
如何使用 Provider 和 connect？
首先，我们需要创建一个 Redux store。以下是一个简单的存储库示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
------ ----------- - -
--
---- ------------
------ -
------ ----------- - -
--
--------
------ ------
-
-
----- ----- - ---------------------在上面的示例中，我们创建了一个名为“count”的状态，并编写了一个简单的 reducer 函数来处理“INCREMENT”和“DECREMENT”操作。
接下来，我们需要将存储库连接到 React 组件。为此，我们需要在组件树的顶部使用 Provider 组件，并将存储库作为 prop 传递给它：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的示例中，我们将存储库传递给了 Provider 组件，并将 App 组件作为其子组件。这使得 App 组件及其所有子组件都可以访问存储库。
最后，我们需要使用 connect 函数将组件连接到存储库。以下是一个示例组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
-------- -------------- -
------ -
-----
------------ ------------------
------- --------------------------------------------
------- --------------------------------------------
------
--
-
-------- ---------------------- -
------ -
------ -----------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
--
-
------ ------- ------------------------ -----------------------------在上面的示例中，我们编写了一个名为 Counter 的组件，并使用 connect 函数将其连接到存储库。我们还定义了两个函数 mapStateToProps 和 mapDispatchToProps，以将组件的 props 映射到存储库中的状态和操作。
现在，我们可以在我们的应用程序中使用 Counter 组件，并且它将自动与存储库连接。每当我们调用“INCREMENT”或“DECREMENT”操作时，组件将自动更新。
结论
在本教程中，我们学习了如何使用 Provider 和 connect 连接 React 组件和 Redux store。我们看到了如何创建一个简单的 Redux store，如何将其连接到 React 应用程序，以及如何使用 connect 函数将组件连接到存储库。
Redux 可以帮助您更好地组织和管理应用程序状态，并使其更易于调试。使用 Provider 和 connect 可以使 Redux 更容易与 React 集成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6758ba358210828e23326758