React 已经成为前端开发中最受欢迎的框架之一，但请注意： React 并不是一个完整的应用程序架构。因此，在构建 React 应用程序时，使用另一个库来管理应用程序的状态是一个很好的选择，而 Redux 就是最热门的选择之一。
Redux 可以帮助您管理应用程序的状态，使您的状态更新得更可预测，并使您的代码更易于扩展和维护。在这篇文章中，我们将讨论 Redux 的入门教程及规范。
Redux 的基础概念
在深入了解 Redux 之前，让我们快速概述一些 Redux 的基础概念。
Store
Store 是 Redux 中最重要的对象之一。 Store 是维护整个应用程序状态的容器。可以将它想象成一个大的 JavaScript 对象，它保存了你的应用中的所有状态，并且状态只能通过 Redux 的特定方式来修改。
Action
Action 是一个简单的 JavaScript 对象，它描述了在 Store 中进行的状态更改。每个 Action 可以包含一个类型和一些数据。例如，您可以创建一个 Action 来表示用户在应用程序中执行了某个操作。
Reducer
Reducer 是 Redux 中的纯函数，它负责处理 Action 和返回新的状态。Reducer 接收一个先前的状态和一个 Action，并返回一个新的状态。因为 Reducer 是纯函数，它必须永远不会改变输入。
中间件
中间件是 Redux 的一种高级技术，它可以拦截 Action 和给定的 Store，并在它们之间执行某些任务。例如，中间件可以发送异步请求或在 Store 中打印调试信息。
Redux 的入门教程
下面，我们将介绍一个简单的 Redux 应用程序。我们将使用 React 和 Redux 来构建一个可以添加和删除待办事项的待办事项列表。
安装
首先你需要安装 Redux，运行以下命令：
npm install redux
创建 Store
现在，我们需要创建一个 Redux Store。为此，我们需要引入 Redux 和实现一个 Reducer，然后将其传递给 createStore 方法。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ ---
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
------ -
---------------
- --- ---------- ------ ------------ -
-
--
---- --------------
------ -
---------
------ ----------------------- -- ------- --- ----------
--
--------
------ ------
-
-
----- ----- - -------------------------现在，我们已经创建了一个简单的 Store。我们将应用程序的整个状态存储在第一个参数initialState中，每当用户执行一个 Action 时，我们的 Reducer 将从 Store 中读取当前的状态，处理 Action，并返回新的状态。
在 React 中使用 Redux
现在，我们需要在 React 中使用 Redux。为此，我们首先需要将 Store 包装在我们的 React 应用程序中。为此，我们需要使用 React-Redux 中的 Provider 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ --- ---- --------
------ ----------- ---- -------------------------
----- ----- - -------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--现在，我们已经将 Store 传递给我们的 React 应用程序。接下来，我们需要使用组件将 Store 的状态传递给我们的应用程序。我们可以使用 connect 函数来完成这项工作。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ --------- ---- -------------
----- --- ------- --------------- -
------ --------- - -
------ ----------------
-------- --------------------------
----------- --------------------------
--
------------------ -
-------------
---------- - -
------ ---
--
-
----------------- - ------- -- -
----- - ----- ----- - - -------------
---------------
------- ------
---
--
----------------- - -- -- -
----- - ----- - - -----------
-- -------------- -
----- - ------- - - -----------
---------
--- --- -----------------
------ -------------
---
---------------
------ ---
---
-
--
----------------------- - ------ -- -- -- -
----- - ---------- - - -----------
--------------------
--
-------- -
----- - ----- - - -----------
----- - ----- - - -----------
------ -
-----
-------- ---------
----
--------------- -- -
--- --------------
------------
-- --
------- ------------------------------------------------------------
-----
---
-----
------ ----------- ------------ ------------- --------------------------------- --
-- --
------- ---------------------------------------------
------
--
-
-
----- --------------- - ----- -- --
------ ------------
---
----- ------------------ - -------- -- --
-------- ---- -- ---------- ----- ----------- ------- ---
----------- -- -- ---------- ----- -------------- -- ---
---
------ ------- ------------------------ -------------------------现在，我们已经完成了一个简单的 Redux 应用程序。Redux Store 现在维护整个应用程序的状态，而 React 组件负责展示和更新这些状态。
Redux 的规范
现在，我们已经对 Redux 有了一定的了解，让我们讨论一些遵循 Redux 规范的最佳实践。
将状态分为块
根据 Redux 正确使用的最佳实践，你应该将你的 Store 状态分成块，每个块都代表应用程序中的一个独立功能模块。这样做的好处是可以使你的代码更加模块化、更容易测试和更易于理解。
使用纯函数
Reducer 必须是一个纯函数。这意味着它应该接收一个输入并返回一个新的输出，不产生任何副作用。这使得 Reducer 更容易缓存、更容易协作，并且使代码更简单。
使用常量表示 Action 类型
将 Action 类型定义为常量，这样有助于减少代码中的拼写错误，并且使维护更容易。
const ADD_TODO = 'ADD_TODO'; const REMOVE_TODO = 'REMOVE_TODO';
保持 Action 的简洁
Action 应该尽可能简单。例如，在前面的代码示例中，我们使用了一个描述了待办事项的 JavaScript 对象来表示 Action。这使得代码更易于理解和维护，并且确保我们的代码不会变得过于复杂。
使用中间件
Redux 中间件可以使 Action 和 Store 之间执行一些任务，这对于日志记录、调试、异步操作等非常重要。因此，在使用 Redux 时应该时刻保持中间件的使用。
结论
在这篇文章中，我们讨论了 Redux 的基础概念，并提供了一个简单的示例应用程序。我们还强调了最佳实践，例如将状态分为块、使用纯函数、将 Action 类型定义为常量、保持 Action 的简洁和使用中间件等。最后，我们希望您可以在实际开发中使用这些知识，并且在开发过程中可以遵循 Redux 的规范和最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677647c86d66e0f9aa1c8be9