Redux 是一个用于 JavaScript 应用程序的可预测状态容器，它可以帮助我们管理应用程序中的数据流。它是一个单向数据流的架构，它将整个应用程序的状态存储在一个单一的 JavaScript 对象中。Redux 的核心思想是将应用程序的状态分离出来，并通过一个统一的机制来控制它。
Redux 的基本概念
Redux 的核心包含三个概念：store、reducer 和 action。
Store
Store 是 Redux 的核心，它是一个存储应用程序的状态的容器。在 Redux 中，整个应用程序的状态被存储在一个单一的 JavaScript 对象中。我们可以通过 store.getState() 方法来获取当前的状态。
Reducer
Reducer 是一个纯函数，它接收一个旧的状态和一个 action，然后返回一个新的状态。Reducer 是 Redux 的核心，它用于更新应用程序的状态。在 Redux 中，所有的状态更新都必须通过 reducer 来完成。
Action
Action 是一个简单的对象，它描述了当前的操作。Action 包含一个 type 属性，用于描述当前的操作类型，以及一些其他的属性，用于描述当前的操作参数。在 Redux 中，所有的状态更新都必须通过 action 来触发。
Redux 的工作流程
Redux 的工作流程可以被简单地描述为：通过 action 触发状态的更新，然后通过 reducer 更新状态。在 Redux 中，所有的状态更新都必须通过这个流程来完成。
Redux 的基本用法
安装和引入 Redux
我们可以通过 npm 安装 Redux：
npm install redux
然后，在我们的应用程序中引入 Redux：
import { createStore } from 'redux';创建一个 Redux store
创建一个 Redux store 的过程非常简单，我们只需要调用 createStore 方法，并传入一个 reducer 函数即可：
const store = createStore(reducer);
创建一个 reducer 函数
Reducer 是 Redux 的核心，它用于更新应用程序的状态。我们可以通过定义一个 reducer 函数来完成状态的更新。Reducer 是一个纯函数，它接收一个旧的状态和一个 action，然后返回一个新的状态。
-- -------------------- ---- -------
-------- ------------- - --- ------- -
------ ------------- -
---- ----------------
------ - --------- ---------- -------------- --
---- ----------------
------ - --------- ---------- -------------- --
--------
------ ------
-
-创建一个 action
Action 是一个简单的对象，它描述了当前的操作。Action 包含一个 type 属性，用于描述当前的操作类型，以及一些其他的属性，用于描述当前的操作参数。
-- -------------------- ---- ------- ----- ------- - - ----- ---------------- -------- --------- -- ----- ------- - - ----- ---------------- -------- --------- --
触发一个 action
我们可以通过调用 store.dispatch 方法来触发一个 action：
store.dispatch(action1); store.dispatch(action2);
获取当前的状态
我们可以通过 store.getState 方法来获取当前的状态：
const currentState = store.getState();
Redux 的高级用法
使用 Redux 中间件
Redux 中间件是一个函数，它可以拦截 action 的调用，并执行一些额外的操作，例如异步操作、日志记录、错误捕获等。Redux 中间件使用了函数式编程的思想，它允许我们将多个中间件组合在一起，以便实现更复杂的操作。
我们可以通过 applyMiddleware 函数来使用 Redux 中间件：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(reducer, applyMiddleware(thunk));在上面的代码中，我们使用了 redux-thunk 中间件来处理异步操作。
使用 React-Redux
React-Redux 是一个用于 React 应用程序的 Redux 绑定库，它提供了一个 Provider 组件和一个 connect 函数，用于将 Redux store 中的状态映射到 React 组件的 props 中。
我们可以通过 Provider 组件来将 Redux store 传递给整个应用程序：
import { Provider } from 'react-redux';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);然后，我们可以通过 connect 函数来连接 Redux store 中的状态和 React 组件的 props：
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- ---------------------- -
------ -
---------- ----------------
---------- ----------------
--
-
------ ------- --------------------------------------在上面的代码中，我们使用了 mapStateToProps 函数来将 Redux store 中的状态映射到 MyComponent 组件的 props 中。
示例代码
下面是一个简单的示例代码，它演示了 Redux 的基本用法：
-- -------------------- ---- -------
------ - ----------- - ---- --------
-- ---- ------- --
-------- ------------- - --- ------- -
------ ------------- -
---- ----------------
------ - --------- ---------- -------------- --
---- ----------------
------ - --------- ---------- -------------- --
--------
------ ------
-
-
-- ---- ----- -----
----- ----- - ---------------------
-- ---- ------
----- ------- - -
----- ----------------
-------- ---------
--
----- ------- - -
----- ----------------
-------- ---------
--
-- ---- ------
------------------------
------------------------
-- -------
----- ------------ - -----------------
--------------------------总结
Redux 是一个强大的状态管理库，它可以帮助我们管理应用程序中的数据流。在本文中，我们学习了 Redux 的基本概念、工作流程和基本用法。我们还介绍了 Redux 的高级用法，包括使用 Redux 中间件和 React-Redux 绑定库。最后，我们提供了一个简单的示例代码，演示了 Redux 的基本用法。希望这篇文章可以帮助你更好地理解 Redux 并在你的项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660397ecd10417a22200753c