Redux 是一个流行的用于构建可预测性的、可维护性的 JavaScript 应用程序的工具。 它使用单一的状态树来管理应用程序的所有状态，并使用纯函数来描述状态变化的过程。 本文将为你介绍 Redux 的基本概念和用法，同时提供一个基于实际案例的例子，使你更好地理解 Redux 的实现方法。
基本概念
Store
Store 是 Redux 应用的核心。 它是一个包含整个应用状态的 JavaScript 对象。 你可以根据需要创建多个 Store，但通常情况下，一个应用程序只需要一个 Store。
Action
Action 是一个描述发生了什么的 JavaScript 对象，它包含一个类型字段和可选的任何其他字段。 Action 可以由应用程序中的任何部分创建，并通过 store.dispatch(action) 方法发送到 Store。 然后，Redux 将相应地更新状态。
const ADD_TODO = 'ADD_TODO';
{
type: ADD_TODO,
text: 'Need to complete Redux tutorial'
}Reducer
Reducer 是一个接收先前状态和当前操作 Action 作为输入的纯函数，并返回新状态的函数。 Reducer 应该是一个没有副作用的纯函数，就是说它不应该修改现有状态，而是应该返回新的状态。
-- -------------------- ---- -------
------- ------- -- -
------ ------------- -
---- ---------
------ -
---------
-
----- ------------
---------- -----
-
-
--------
------ -----
-
-Action Creator
Action Creator 是一个返回 Action 的函数。 这些函数被用来封装创建 Action 的逻辑，并且可以在应用程序中的任何部分使用。
const addTodo = (text) => ({
type: ADD_TODO,
text
})实例应用
在本节中，我们将创建一个简单的 Todo 应用程序，并使用 Redux 管理其状态。
在开始之前，请确保你已经安装了 redux 模块。 如果没有，请运行以下命令进行安装。
npm install redux
设置 Store
我们从创建一个 Store 开始。 在这个例子中，我们将使用 createStore 函数创建一个 Store。
import { createStore } from 'redux';
const store = createStore(todoApp);定义 Action 类型
我们将定义一些操作，例如添加或删除 ToDo 项目。 为了跟踪这些操作，我们需要定义一些 Action 类型。 我们定义一个 ADD_TODO 和一个 DELETE_TODO 类型字段。
const ADD_TODO = 'ADD_TODO'; const DELETE_TODO = 'DELETE_TODO';
编写 Reducer
我们现在需要创建我们的 Reducer。 Reducer 是一个纯函数，接收先前状态和当前操作 Action 作为输入，并返回新状态。
-- -------------------- ---- -------
----- ------------ - -
------ --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ -
---------
------ -
---------------
-
----- ---------------
---------- -----
-
-
--
---- ------------
------ -
---------
------ ----------------------- -- --------- --- ---------------
--
--------
------ ------
-
--创建 Action Creator
我们将编写一些函数来封装添加和删除操作的逻辑。这些 Action Creator 函数将返回一个 Action。
-- -------------------- ---- ------- ----- ------- - ------ -- -- ----- --------- -------- ---- --- ----- ---------- - ------ -- -- ----- ------------ -------- ---- ---
使用 Redux
我们已经准备好创建我们的 Todo 应用程序并使用 Redux 管理它的状态。 以下是一个简单的示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- -------- - -----------
----- ----------- - --------------
----- ------------ - -
------ --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ -
---------
------ -
---------------
-
----- ---------------
---------- -----
-
-
--
---- ------------
------ -
---------
------ ----------------------- -- --------- --- ---------------
--
--------
------ ------
-
--
----- ------- - ------ -- --
----- ---------
-------- ----
---
----- ---------- - ------ -- --
----- ------------
-------- ----
---
----- ----- - ---------------------
------------------ -- -------------------------------
----------------------------- ---------
-------------------------------- ---------在这个简单的示例中，我们创建了一个应用程序并定义了两种类型的操作：添加或删除 ToDo 项目。 我们编写了一个 Reducer 来处理这些类型的操作，并编写了一些 Action Creator 函数来封装操作逻辑。
我们然后创建了一个 Store 并使用 store.subscribe() 方法来监听 Store 中状态的变化。 最后，我们调用了 store.dispatch() 方法来触发我们的 Action。
结论
Redux 是一个强大的状态管理工具，它可以帮助我们构建可预测性和可维护性的 JavaScript 应用程序。 在本文中，我们介绍了 Redux 的基本概念和用法，并提供了一个实际案例来帮助你更好地理解 Redux 的实现方法。 现在，你已经有了一个非常好的起点，让你继续学习并提高你的 Redux 技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672dc60beedcc8a97c85e48d