Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以帮助您管理应用程序的状态，并使状态更容易调试和维护。在本文中，我们将学习如何使用 Redux 开发一个适用于多个平台的应用程序。
什么是 Redux？
Redux 是一个 JavaScript 应用程序状态管理库，它可以帮助您管理应用程序的状态。Redux 通过将应用程序的状态存储在一个单一的存储库中来实现这一点，这个存储库被称为“store”。应用程序的状态可以通过 store 中的“actions”来修改，这些 actions 是一个简单的 JavaScript 对象，它们描述了应用程序中发生的事件。
Redux 还提供了一个称为“reducers”的概念，reducers 是纯函数，它们接收当前的状态和一个 action，并返回一个新的状态。这使得状态更容易调试和维护，因为您可以轻松地跟踪状态的变化。
开始
在开始之前，您需要安装 Node.js 和 npm。如果您还没有安装它们，请访问官方网站下载并安装。
我们将使用 create-react-app 来创建我们的应用程序，这是一个快速创建 React 应用程序的工具。在终端中输入以下命令：
--- ---------------- ------ -- ------
现在，我们需要安装所需的依赖项。在终端中输入以下命令：
--- ------- ------ ----- -----------
创建一个 Redux store
在 src 目录下创建一个名为 store.js 的文件，并添加以下代码：
------ - ----------- - ---- --------
----- ------------ - ---
-------- ----------------- - ------------- ------- -
------ ------------- -
--------
------ ------
-
-
----- ----- - -------------------------
------ ------- ------这个文件将创建一个 Redux store，并将其导出，该 store 包含一个 rootReducer 函数，该函数接收当前状态和一个 action，并返回一个新的状态。我们还为其提供了一个初始状态 initialState，它在应用程序启动时将用作状态的默认值。
将 Redux store 与 React 应用程序集成
我们现在需要将 Redux store 与 React 应用程序集成。在 src 目录下创建一个名为 index.js 的文件，并添加以下代码：
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
-------------------------------
--在这个文件中，我们使用 React 的 Provider 组件将 Redux store 注入到我们的应用程序中。Provider 组件使我们的应用程序中的所有组件都可以访问 Redux store。
创建一个 Redux action
在 src 目录下创建一个名为 actions.js 的文件，并添加以下代码：
------ ----- -------- - ----------- ------ -------- ------------- - ------ - ----- --------- ---- -- -
这个文件将创建一个名为 addTodo 的 Redux action，它将接收一个文本参数，并返回一个包含类型 ADD_TODO 和文本的对象。
创建一个 Redux reducer
在 src 目录下创建一个名为 reducers.js 的文件，并添加以下代码：
------ - -------- - ---- ------------
----- ------------ - -
------ ---
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ ---------------- - ----- ----------- ---
--
--------
------ ------
-
-
------ ------- ------------这个文件将创建一个 rootReducer 函数，它将接收当前状态和一个 action，并返回一个新的状态。在这个特定的 reducer 中，我们只有一个 ADD_TODO action，它将添加一个新的 todo 到我们的状态中。
创建一个 React 组件
在 src 目录下创建一个名为 App.js 的文件，并添加以下代码：
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- ------------
----- --- ------- --------------- -
----- - -
---------- ---
--
----------------- - --- -- -
--------------- ---------- -------------- ---
--
------------- - -- -- -
-----------------------------------------
--------------- ---------- -- ---
--
-------- -
------ -
-----
------
-----------
----------------------------
---------------------------------
--
------- -------------------------------- -------------
----
---------------------------- ------ -- -
--- ----------------------------
---
-----
------
--
-
-
-------- ---------------------- -
------ -
------ ------------
--
-
----- ------------------ - -
--------
--
------ ------- ------------------------ -------------------------这个文件将创建一个名为 App 的 React 组件，并将其连接到 Redux store。这个组件将渲染一个文本输入框和一个“Add Todo”按钮，当用户单击按钮时，它将调用我们的 addTodo action 并将输入框中的文本作为参数传递给它。
我们还定义了一个 mapStateToProps 函数，它将状态映射到组件的 props 中，并定义了一个 mapDispatchToProps 对象，它将我们的 addTodo action 映射到组件的 props 中。最后，我们使用 connect() 函数将组件连接到 Redux store。
运行应用程序
现在，您已经创建了一个适用于多个平台的 Redux 应用程序！在终端中输入以下命令以启动应用程序：
--- -----
现在您可以在浏览器中访问 http://localhost:3000 来查看您的应用程序。您应该看到一个简单的文本输入框和一个“Add Todo”按钮，当您单击按钮时，它将添加一个新的 todo 到列表中。
结论
在本文中，我们学习了如何使用 Redux 开发一个适用于多个平台的应用程序。我们创建了一个 Redux store、一个 action 和一个 reducer，然后将它们与 React 应用程序集成。我们还创建了一个简单的 React 组件，它使用我们的 action 和 reducer 来添加和显示 todo 列表。
Redux 可以帮助您更轻松地管理应用程序的状态，并使状态更容易调试和维护。希望本文能够帮助您入门 Redux，并为您的下一个项目提供帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6725c0db2e7021665e189f06