Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以帮助您更轻松地管理应用程序的状态。在 React 应用中使用 Redux 可以让您更好地组织应用程序的数据流，使其更容易维护和扩展。本文将向您展示如何在 React 应用中使用 Redux 的最小示例。
安装 Redux
在开始之前，您需要在项目中安装 Redux。您可以使用 npm 或 yarn 安装 Redux。在终端中运行以下命令：
npm install redux
或者
yarn add redux
创建 Redux Store
Redux 应用程序的核心是 Store。Store 包含应用程序的状态，并提供了一些方法来更新和获取状态。要创建 Redux Store，您需要引入 Redux 的 createStore 方法并定义一个 reducer。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
------ ----------- - --
--
---- ------------
------ -
------ ----------- - --
--
--------
------ ------
-
--
----- ----- - ---------------------在上面的代码中，我们定义了一个名为 initialState 的对象，它包含一个名为 count 的属性。我们还定义了一个 reducer 函数，它负责处理状态的更新，使用 switch 语句根据不同的 action.type 返回新的状态。最后，我们使用 createStore 方法创建了一个名为 store 的 Redux Store。
将 Store 传递给 React 组件
现在我们已经创建了 Redux Store，接下来我们需要将它传递给 React 组件，以便在组件中使用它。我们可以使用 React 的 Provider 组件来实现这一点。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的代码中，我们引入了 React、ReactDOM、Provider 和 store。我们将 store 作为 Provider 组件的属性传递给了 App 组件。Provider 组件会将 store 传递给所有子组件，使它们可以使用 Redux Store。
在组件中使用 Redux Store
现在我们已经将 Redux Store 传递给了 React 组件，接下来我们需要在组件中使用它。我们可以使用 React Redux 提供的 connect 函数来实现这一点。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- --- - -- ------ ---------- --------- -- -- -
------ -
-----
---------- ------------
------- --------------------------------------
------- --------------------------------------
------
--
--
----- --------------- - ------- -- -
------ -
------ ------------
--
--
----- ------------------ - ---------- -- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
--
--
------ ------- ------------------------ -------------------------在上面的代码中，我们引入了 React、connect 和两个 action creator 函数。我们定义了一个名为 App 的组件，并使用 connect 函数将其连接到 Redux Store。
connect 函数接受两个参数：mapStateToProps 和 mapDispatchToProps。
mapStateToProps 函数将 Redux Store 中的状态映射到组件的 props 属性。在上面的代码中，我们将 count 属性映射到组件的 props。
mapDispatchToProps 函数将 action creator 函数映射到组件的 props 属性。在上面的代码中，我们将 increment 和 decrement 函数映射到组件的 props。
现在，我们可以在组件中使用 count、increment 和 decrement 属性来更新和获取 Redux Store 中的状态。
示例代码
下面是一个完整的示例代码，它展示了如何在 React 应用中使用 Redux 的最小示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - --------- ------- - ---- --------------
----- ------------ - -
------ --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
------ ----------- - --
--
---- ------------
------ -
------ ----------- - --
--
--------
------ ------
-
--
----- ----- - ---------------------
----- --- - -- ------ ---------- --------- -- -- -
------ -
-----
---------- ------------
------- --------------------------------------
------- --------------------------------------
------
--
--
----- --------------- - ------- -- -
------ -
------ ------------
--
--
----- ------------------ - ---------- -- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
--
--
----- ------------ - ------------------------ -------------------------
----------------
--------- --------------
------------- --
------------
-------------------------------
--结论
在本文中，我们向您展示了如何在 React 应用中使用 Redux 的最小示例。我们创建了 Redux Store、将其传递给 React 组件并在组件中使用它。希望本文能够帮助您更好地理解 Redux，并为您的 React 应用程序提供更好的状态管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753fea21b963fe9cc4b776f