React 是一款非常流行的 JavaScript 库，它可以帮助开发人员构建高效、可重用的用户界面。而 Redux 则是一个用于 JavaScript 应用程序状态管理的库，它可以帮助开发人员更好地组织和管理应用程序的状态。本文将介绍如何使用 React 和 Redux 来构建一个完整的应用程序。
准备工作
在开始之前，您需要安装 Node.js 和 npm。如果您还没有安装，请前往 Node.js 官网 下载并安装。安装完成后，您可以在命令行中运行以下命令来验证是否安装成功：
---- -- --- --
创建项目
首先，我们需要创建一个新的项目。我们可以使用 create-react-app 脚手架工具来快速创建一个 React 应用程序。在命令行中运行以下命令来安装 create-react-app：
--- ------- -- ----------------
安装完成后，我们可以使用以下命令来创建一个新的 React 应用程序：
---------------- ------ -- ------ --- -----
这将创建一个名为 my-app 的新项目，并启动开发服务器。您可以在浏览器中访问 http://localhost:3000 来查看应用程序。
添加 Redux
现在我们已经创建了一个基本的 React 应用程序，接下来我们将添加 Redux。首先，我们需要安装 redux 和 react-redux 库：
--- ------- ------ ----- -----------
安装完成后，我们需要创建一个 Redux store。在 src 目录下创建一个名为 store.js 的新文件，并添加以下代码：
------ - ----------- - ---- ------- ----- ------------ - -- -------- ----------------- - ------------- ------- - ------ ----- - ----- ----- - ------------------------ ------ ------- -----
这将创建一个名为 store 的新 Redux store。我们还需要将 Redux store 与 React 应用程序集成。在 src 目录下创建一个名为 index.js 的新文件，并添加以下代码：
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- -------------
------ ----- ---- ---------
------ --- ---- -------
----------------
--------- --------------
---- --
------------
-------------------------------
-这将使用 react-redux 库中的 Provider 组件将 Redux store 传递给 React 应用程序。现在我们已经将 Redux 集成到我们的应用程序中了。
创建组件
接下来，我们将创建一些 React 组件来显示我们的应用程序状态。在 src 目录下创建一个名为 components 的新文件夹，并在其中创建一个名为 Counter.js 的新文件。在 Counter.js 文件中添加以下代码：
------ ----- ---- -------
------ - ------- - ---- -------------
----- ------- ------- --------------- -
-------- -
------ -
-----
------------ -----------------------
------- -----------------------------------------
------- -----------------------------------------
------
-
-
-
-------- ---------------------- -
------ -
------ -----------
-
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
-
-
------ ------- ------------------------ ----------------------------这将创建一个名为 Counter 的新组件，它将从 Redux store 中获取 count 状态，并渲染一个计数器和两个按钮。我们还需要将 Counter 组件添加到我们的应用程序中。在 src 目录下的 App.js 文件中添加以下代码：
------ ----- ---- -------
------ ------- ---- ----------------------
----- --- ------- --------------- -
-------- -
------ -
-----
-------- --
------
-
-
-
------ ------- ---这将在我们的应用程序中添加一个名为 Counter 的新组件。
更新状态
现在我们已经创建了一个基本的应用程序，但是当我们单击增量或减量按钮时，计数器并不会更新。这是因为我们还没有更新我们的 Redux store。我们需要更新 store.js 文件中的 rootReducer 函数来处理 INCREMENT 和 DECREMENT 操作。在 store.js 文件中添加以下代码：
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - -
---- ------------
------ - --------- ------ ----------- - - -
--------
------ -----
-
-这将更新我们的 Redux store，以便在 INCREMENT 或 DECREMENT 操作时更新 count 状态。现在，当我们单击增量或减量按钮时，计数器将更新。
结论
在本文中，我们已经介绍了如何使用 React 和 Redux 来构建一个完整的应用程序。我们学习了如何创建 Redux store、如何将 Redux store 与 React 应用程序集成、如何创建 React 组件并将它们连接到 Redux store、以及如何更新 Redux store 中的状态。希望这篇文章对您有所帮助！下面是完整的示例代码：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673e8d3690e7ed93bee3a741