前言
Redux 是一个用于管理应用程序状态的 JavaScript 库。它提供了一种可预测的状态管理方案，用于处理复杂应用程序的数据流。Redux 是在 React 社区中被广泛使用的一种工具，但它也可以与其他框架或库结合使用。
在本文中，我们将介绍 Redux 的概念，其组成部分以及如何使用 Redux 构建一个简单的应用程序。
Redux 概述
Redux 的核心思想是在应用程序中维护一个单一的状态树，即 store（仓库），并使用纯函数（reducers）来描述如何处理它。
- Store：一个存储应用程序所有状态的对象。它是 Redux 中唯一的数据源，并且是不可变的，在任何时候只能通过 dispatch 一个 action 来更新它。
- Action：一个描述发生了什么的纯 JavaScript 对象。它必须有一个 type 属性，它在 reducers 中被用来处理 action 的具体操作。
- Reducer：一个纯函数，它在 Action 被 dispatch 之后决定如何更新 state。Reducer 接收旧的 state 和 action，并返回新的 state。Reducer 必须是纯函数，即它不能修改传入的参数，也不能有副作用。在 Redux 中，reducer 是唯一能够修改应用程序状态的地方。
Redux 使用方法
安装 Redux
要开始使用 Redux，您需要安装它以及与之相关的包。通过运行以下命令来安装它：
--- ------- -----
创建 Store
要创建一个 store，您需要定义一个初始状态对象，并创建一个 reducer 函数来处理状态更新。以下示例创建了一个简单的 reducer，它仅会将传入的值添加到 state 中：
----- ------------ - - ------ - --
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ----------------------------------在此示例中，initialState 是初始状态对象，counterReducer 是处理状态更新的 reducer 函数。请注意，reducer 函数采用两个参数：当前状态和 action 对象。reducer 返回更新后的状态对象。最后，createStore 函数创建了一个 store。
发送 Actions
要更新状态，您需要发送一个 action。以下是一个 action 示例：
----- --------------- - - ----- ----------- --
它只是一个普通的 JavaScript 对象，其中包含一个 type 属性，它描述了要执行的操作。
要发送 action，请使用以下代码：
--------------------------------
该代码将 action 对象发送到 Redux store。
获取 Store 中的数据
为了获取状态，请使用以下代码：
----- ----- - ----------------- -------------------
该代码返回 store 中的当前状态。
示例代码
以下是一个简单的示例应用程序，它演示了 Redux 的用法。此应用程序使用了上面提到的基本概念。
----- ------------ - - ------ - --
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ----------------------------------
-------- -------- -
----- ----- - -----------------
------------------------------------------ - ------------
-
-------------------------------------------------------------- -- -- -
---------------- ----- ----------- ---
---
-------------------------------------------------------------- -- -- -
---------------- ----- ----------- ---
---
------------------------
---------在此示例中，我们创建了一个 store 和 counterReducer，它们处理 action。我们还定义了一个 render 函数，用于更新 DOM。最后，我们将 increment 和 decrement 按钮绑定到 store 的 dispatch 方法，以便在单击按钮时发送相应的 action。store.subscribe 方法用于注册一个回调函数，该回调函数将在应用程序状态发生更改时被调用。这里我们将其用于在状态更改时重新渲染 UI。
结论
Redux 是一种非常有用的状态管理工具，它可以帮助您在 React 应用程序中管理状态，并确保状态更新是可预测的。在实现自己的应用程序时，可以使用该工具。
我们希望您通过本文学习了 Redux 的基础知识，并能够开始使用它。始终牢记 Redux 的核心思想和工作原理，将会让您的代码更加易于维护和管理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671079095f551281026b5c5f