Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以帮助您管理应用程序的状态，并使状态更容易调试和维护。在本文中，我们将学习如何使用 Redux 开发一个适用于多个平台的应用程序。
什么是 Redux？
Redux 是一个 JavaScript 应用程序状态管理库，它可以帮助您管理应用程序的状态。Redux 通过将应用程序的状态存储在一个单一的存储库中来实现这一点，这个存储库被称为“store”。应用程序的状态可以通过 store 中的“actions”来修改，这些 actions 是一个简单的 JavaScript 对象，它们描述了应用程序中发生的事件。
Redux 还提供了一个称为“reducers”的概念，reducers 是纯函数，它们接收当前的状态和一个 action，并返回一个新的状态。这使得状态更容易调试和维护，因为您可以轻松地跟踪状态的变化。
开始
在开始之前，您需要安装 Node.js 和 npm。如果您还没有安装它们，请访问官方网站下载并安装。
我们将使用 create-react-app 来创建我们的应用程序，这是一个快速创建 React 应用程序的工具。在终端中输入以下命令：
npx create-react-app my-app cd my-app
现在，我们需要安装所需的依赖项。在终端中输入以下命令：
npm install --save redux react-redux
创建一个 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 的文件，并添加以下代码：
export const ADD_TODO = 'ADD_TODO';
export function addTodo(text) {
return { type: ADD_TODO, text };
}这个文件将创建一个名为 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 应用程序！在终端中输入以下命令以启动应用程序：
npm start
现在您可以在浏览器中访问 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