前言
Redux 是一种 JavaScript 应用程序状态管理工具，它可以让你更容易、更可预测地管理你的应用状态，从而大大简化了应用程序状态管理。Redex 很流行，因为它能够有效地解决常见的 JavaScript 应用程序状态管理问题，例如：如何同步处理状态，如何处理异步变化，如何在组件间传递状态等问题。在本文中，我们将从简单到复杂全面介绍 Redux。
简单的 Redux
Redux 的核心是 store，它维护着应用程序的状态，并提供了一些方法来获取和更新状态。在下面的代码中，我们创建了一个简单的 Redux store，它包含一个名为 count 的状态变量，并提供了一个 increatment 方法来增加 count 值。
-- -------------------- ---- -------
-- -- ------ --
----- --------- - ------------
-- ---- ------ ---- ---------
-------- ----------- -
------ -
----- ---------
--
-
-- -- -------
-------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ----------
------ - ------ ----------- - - --
--------
------ ------
-
-
-- -- -----
----- ----- - ---------------------------
-- ------
------------------------------ -- - ------ - -
-- ----
----------------------------
-- --------
------------------------------ -- - ------ - -这些代码用到了 Redux 的三个最基本的概念：Actions、Reducers 和 Store。
- Action 是一个 JavaScript 对象，用来描述发生了什么行为。
- Reducer 是一个纯函数，接收一个旧的 state 和一个 action 对象，计算并返回一个新的 state。
- Store 包含了应用程序的整个 state，可以根据 action 来管理应用程序状态的变化。
使用 React 组件来管理 Redux 状态
在使用 React 组件之前，我们需要先安装 React 和 Redux 的依赖。在终端输入以下命令即可完成：
npm install --save react react-dom redux react-redux
接着，我们可以创建一个简单的 React 组件来显示当前的 count 值。
-- -------------------- ---- -------
----- ------- ------- --------------- -
----------- - -- -- -
-----------------------
--
-------- -
------ -
-----
---------------------------
------- --------------------------------------
------
--
-
-
-- - ----- ----- --- ----- --- -----
----- --------------- - ----- -- -
------ - ------ ----------- --
--
-- -- ------ ----
----- --------- - -- -- -
------ - ----- ----------- --
--
-- - ----- ------ --- ----- --- -----
----- ------------------ - -
---------
--
-- -- ----- ----- ------- --- ----- ----- - ------ --- ----- --- -----
----- ---------------- - -------------------
----------------
------------------
-----------
-- -- ----- --
----------------
-------------------- --------------
----------------- --
-----------------------
-------------------------------
--上面的代码中，我们定义了一个 Counter 组件，并通过 connect 函数将 Redux state 和 action 映射到组件的 props 上。接着，我们在组件中提供了一个 increatment 的方法来增加 count 值，这个方法会在点击 +1 按钮时触发。
使用异步 Action 处理
在应用程序开发中，异步操作是很常见的。Redux 默认只支持同步操作，因此我们需要使用中间件来实现异步操作。
在 Redux 中，中间件是一种可以扩展 dispatch 方法的模块。redux-thunk 是最流行的 Redux 中间件之一，它允许我们在 action 中返回一个函数，而不是一个简单的对象。
npm install --save redux-thunk
下面的代码演示了如何使用 redux-thunk 处理异步 Action。
-- -------------------- ---- -------
-- -- ------ --
----- ------------------- - ----------------------
----- ------------------- - ----------------------
----- ----------------- - --------------------
-- -- ------ ----
-------- ------------------- -
------ -
----- -------------------
-
-
-------- ------------------------ -
------ -
----- --------------------
-------- -----
-
-
-------- ---------------------- -
------ -
----- ------------------
-------- -----
-
-
-- ---- ------ ----
-------- ------------ -
------ -------- ---------- -
------------------------------
---------------------------------------------------
-------------- -- ----------------
----------- -- -----------------------------------
------------ -- ---------------------------------
-
-
-- -- -------
-------- ----------------- - - -------- ------ ------ --- ------ -- -- ------- -
------ ------------- -
---- --------------------
------ - -------- ----- ------ --- ------ -- --
---- --------------------
------ - -------- ------ ------ --------------- ------ -- --
---- ------------------
------ - -------- ------ ------ --- ------ -------------- --
--------
------ ------
-
-
-- -- -----
----- ----- - ------------------------------ -------------------------------------------
-- ------
------------------------------ -- - -------- ------ ------ --- ------ -- -
-- ------
-----------------------------
-- --------
------------------ -- -------------------------------在上面的代码中，我们首先定义了三个 action 创建函数：fetchUsersRequest、fetchUsersSuccess 和 fetchUsersError，分别表示请求、成功和错误的状态。接着，我们定义了一个异步的 action 创建函数 fetchUsers，在这个函数中，我们使用 fetch() 方法来获取用户列表，并根据请求的结果调用不同的 action 创建函数。
最后，我们创建了一个 userReducer 来管理用户列表的状态，包括 users、loading 和 error。我们也使用了 Redux.applyMiddleware() 方法来将 redux-thunk 中间件应用到 Redux store 中。
结论
在本文中，我们从简单到复杂全面介绍了 Redux，包括：创建一个简单的 Redux store，使用 React 组件来管理 Redux 状态，处理异步 Action 的方法。Redux 是一个非常强大的状态管理工具，可以帮助我们更好地管理应用程序状态。希望这篇文章能够帮你更好地理解 Redux，并启发你在开发应用程序时如何更好地使用 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67750c1b6d66e0f9aaf33da8