Redux 是一个 JavaScript 应用程序状态管理库，它可以帮助我们更好地管理应用程序的状态。Redux 是一个非常流行的库，被广泛应用于 React 应用程序中。在本篇文章中，我们将深入浅出地介绍 Redux，让你能够在 30 分钟内学会 Redux 的使用。
Redux 是什么？
Redux 是一个状态管理库，它可以帮助我们更好地管理应用程序的状态。Redux 通过一个单一的状态树来管理我们的应用程序状态，这个状态树可以被任何组件访问，从而使我们的应用程序状态更加可预测。
Redux 的三个核心概念是：
- Store：存储应用程序的状态。
- Action：描述应用程序中发生的事情。
- Reducer：根据 Action 更新 Store 中的状态。
Redux 的基本用法
我们来看一下 Redux 的基本用法。首先，我们需要安装 Redux：
npm install redux
然后，我们需要创建一个 Store。Store 是 Redux 中最重要的概念之一，它存储了我们应用程序的状态：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------在上面的代码中，我们创建了一个 Store，并定义了一个初始状态 initialState。然后，我们定义了一个 reducer 函数，这个函数接收一个 state 和一个 action。reducer 函数根据 action 的类型来更新 state，并返回一个新的 state。
我们可以使用 store.getState() 方法来获取当前的状态：
console.log(store.getState()); // { count: 0 }我们可以使用 store.dispatch() 方法来派发一个 action：
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }
store.dispatch({ type: 'DECREMENT' });
console.log(store.getState()); // { count: 0 }在上面的代码中，我们分别派发了 INCREMENT 和 DECREMENT 两个 action，这两个 action 分别对应着加一和减一的操作。每次派发 action 后，我们都可以通过 store.getState() 方法来获取当前的状态。
Redux 的高级用法
Redux 的高级用法包括异步操作、中间件、组合 reducer 等。这里我们简单介绍一下这些概念。
异步操作
Redux 默认只能处理同步操作，但是我们的应用程序中可能会有很多异步操作，例如发送请求、处理定时器等。为了处理这些异步操作，我们需要使用 Redux Thunk 中间件。
npm install redux-thunk
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
----- ------------ - -
---------- ------
----- -----
------ -----
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- --------------
------ - --------- ---------- ---- --
---- ----------------
------ - --------- ---------- ------ ----- -------------- --
---- --------------
------ - --------- ---------- ------ ------ -------------- --
--------
------ ------
-
-
-------- ------- -
------ -------- -- -
---------- ----- ------------- ---
-----------------------------------------------------
-------------- -- ----------------
---------- -- -
---------- ----- ---------------- -------- ---- ---
--
------------ -- -
---------- ----- -------------- -------- ----- ---
---
--
-
----- ----- - -------------------- ------------------------
------------------------在上面的代码中，我们定义了一个 fetch 函数，这个函数返回一个函数。这个函数接收一个 dispatch 函数作为参数，我们在这个函数中可以执行异步操作，并在异步操作完成后派发对应的 action。
我们使用 applyMiddleware() 方法来引入 Redux Thunk 中间件。
中间件
中间件是 Redux 的一个重要概念，它可以让我们在派发 action 和更新 state 之间添加自定义的逻辑。中间件可以用于日志记录、异步操作、错误处理等。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
-------- -------- -------- -- -
------ ---- -- ------ -- -
-------------------------- --------
----- ------ - -------------
----------------- ------- ------------
------ -------
--
-
----- ----- - -------------------- -------------------------
---------------- ----- ----------- ---
---------------- ----- ----------- ---在上面的代码中，我们定义了一个 logger 中间件，这个中间件会在派发 action 和更新 state 之间添加自定义的逻辑。我们使用 applyMiddleware() 方法来引入 logger 中间件。
组合 reducer
当我们的应用程序变得越来越复杂，我们可能需要将 reducer 拆分成多个小的 reducer，然后再将它们组合起来。Redux 提供了一个 combineReducers() 方法来实现这个功能。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
----- ------------ - -
------ --
-------- ---
--
-------- ------------------ - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-
-------- -------------------- - --- ------- -
------ ------------- -
---- --------------
------ ---------------
--------
------ ------
-
-
----- ------- - -----------------
------ -------------
-------- ---------------
---
----- ----- - ---------------------
---------------- ----- ----------- ---
---------------- ----- -------------- -------- ------ ------ ---
------------------------------ -- - ------ -- -------- ------ ------ -在上面的代码中，我们将 reducer 拆分成了 countReducer 和 messageReducer 两个小的 reducer，并使用 combineReducers() 方法将它们组合起来。
总结
在本文中，我们介绍了 Redux 的基本概念和用法，包括 Store、Action 和 Reducer。我们还介绍了 Redux 的高级概念，包括异步操作、中间件和组合 reducer。
Redux 是一个非常强大的状态管理库，它可以帮助我们更好地管理应用程序的状态。如果你正在开发一个大型的 React 应用程序，那么 Redux 绝对是一个不可或缺的工具。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650a8d7395b1f8cacd4e640c