Redux 是一个前端领域非常流行的数据管理库，它可以让我们更好地管理前端应用的状态，并且使得我们的代码更加易于维护。Redux 可以与各种框架（如 React、Angular 和 Vue）一起使用，是前端技术栈中必不可少的一部分。但是，对于初学者来说，Redux 似乎有点难以理解。在本文中，我将通过实例讲解 Redux 全家桶的使用，帮助初学者更好地学习 Redux。
Redux 全家桶
Redux 通常与 React 一起使用，但实际上它也可以与其他框架一起使用。下面是 Redux 的全家桶：
redux: Redux 核心库react-redux: React 的 Redux 绑定库，用于将 Redux 与 React 组件连接起来redux-thunk: Redux 中间件，可用于处理异步操作redux-logger: Redux 中间件，用于记录所有的 action 和 state，方便开发者调试redux-devtools: Redux 的开发工具，可帮助开发者进行调试和监视
接下来，我将逐个讲解这些库的作用，并展示如何将它们结合起来使用。
安装 Redux
我们可以通过 npm 来安装 Redux 和其他全家桶库：
npm install redux react-redux redux-thunk redux-logger redux-devtools
Redux 基础
在使用 Redux 时，我们需要理解三个概念：
store: 存储应用状态的容器action: 描述发生的事件的对象reducer: 处理 action 的函数，根据 action 更新 store 中的状态
我们来看一个简单的示例：一个计数器，包含一个按钮和一个显示计数的标签。当我们点击按钮时，计数器会自增。这个示例将帮助初学者了解 Redux 是如何工作的。
首先，我们需要初始化一个 store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------这个代码定义了一个名为 store 的 Redux 存储实例，它包含了一个 reducer 函数，用于处理 state 的更新。这个 reducer 函数有两个参数：state 和 action。在这个示例中，state 是一个含有 count 属性的对象，初始值为 0。
现在，我们需要定义一个 action。在这个示例中，我们定义了一个名为 INCREMENT 的 action：
const incrementAction = { type: "INCREMENT" };现在，我们可以更新 store 的 state 了：
store.dispatch(incrementAction);
我们还需要监视 store 的 state 的变化。我们可以使用 getState 方法来获取当前的 state：
console.log(store.getState());
// Output: { count: 1 }现在，我们已经成功地使用 Redux 创建了一个计数器，但是这个计数器只支持同步更新 state，无法处理异步操作。接下来，我们将引入中间件来处理异步操作。
Redux 异步操作
在处理异步操作时，我们需要使用 redux-thunk 中间件。redux-thunk 提供了一种将异步 action 转换为同步 action 的方法。首先，我们需要安装 redux-thunk 包。
npm install redux-thunk
然后，我们需要将 redux-thunk 引入到我们的 Redux 应用中：
import thunk from "redux-thunk";
import { applyMiddleware, createStore } from "redux";
const store = createStore(reducer, applyMiddleware(thunk));然后，我们需要创建一个异步 action，这个 action 中间要间接调用另一个 action：
function incrementAsync() {
return function (dispatch) {
setTimeout(() => {
dispatch(incrementAction);
}, 1000);
};
}在这个代码中，incrementAsync 函数返回的是一个函数，这个函数有一个参数 dispatch，用于派发 action。然后，我们在这个函数中使用了 setTimeout 来模拟异步操作。在 setTimeout 回调函数中，我们派发了 INCREMENT action。
这样，我们就处理了异步操作。
Redux 调试工具
为了更好地理解 Redux 应用的状态，我们通常会使用 Redux 开发工具来监视 Redux 状态的变化。redux-devtools 是一个非常有用的工具，可以帮助我们更好地诊断和调试 Redux 应用。下面是一个使用 redux-devtools 的示例配置：
import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));在这个代码中，我们首先引入了 redux-devtools-extension 中的 composeWithDevTools 函数，然后使用它来替换 applyMiddleware。
现在，我们就成功地使用了 redux-devtools 来监视 Redux 应用的状态了。
React-Redux
react-redux 是 React 的 Redux 绑定库，使得我们可以更方便地使用 Redux。下面是一个使用 react-redux 的示例：
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- -------------- -
----- - ------ ---------- -------------- - - ------
------ -
-----
----------------
------- --------------------------------------
------- ---------------------------------- --------------
------
--
-
----- --------------- - ------- -- -
------ -
------ ------------
--
--
----- ------------------ - ---------- -- -
------ -
---------- -- -- ---------- ----- ----------- ---
--------------- -- -- ---------------------------
--
--
------ ------- ------------------------ -----------------------------在这个代码中，我们定义了一个计数器组件 Counter，使用 connect 函数将组件与 Redux 绑定起来。我们发现，在 Counter 组件中，我们访问了 Redux store 中的状态，并且我们还定义了两个事件回调函数 increment 和 incrementAsync。
在 mapStateToProps 函数中，我们定义了一个 count 属性，它来自于 Redux 应用的 state。
在 mapDispatchToProps 函数中，我们定义了两个事件处理函数：increment 和 incrementAsync。它们和之前定义的一样。
现在，我们就成功地使用了 react-redux 来连接 React 和 Redux，并创建了一个带有计数器的 React 应用。
结论
通过这个示例，我们学习了 Redux 全家桶的使用，包括了 Redux 的安装、基本概念、异步操作、调试工具和 react-redux 的使用。这些知识将会帮助初学者更好地理解和使用 Redux。
-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
------ ----- ---- --------------
------ - ------------------- - ---- ---------------------------
------ - ------- - ---- --------------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- --------------- - - ----- ----------- --
-------- ---------------- -
------ -------- ---------- -
------------- -- -
--------------------------
-- ------
--
-
----- ----- - -------------------- ---------------------------------------------
-------- -------------- -
----- - ------ ---------- -------------- - - ------
------ -
-----
----------------
------- --------------------------------------
------- ---------------------------------- --------------
------
--
-
----- --------------- - ------- -- -
------ -
------ ------------
--
--
----- ------------------ - ---------- -- -
------ -
---------- -- -- ---------- ----- ----------- ---
--------------- -- -- ---------------------------
--
--
------ ------- ------------------------ -----------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a31a8d91dce0dc87f9375