React 是一个非常流行的前端框架，它的组件化和虚拟 DOM 技术使得前端开发变得更加高效和灵活。但是，随着项目的复杂度增加，React 组件之间的通信也变得越来越复杂。这时，Redux 就成为了一个非常好的解决方案。
Redux 是一个状态管理库，它提供了一种可预测的状态管理模式。Redux 的核心概念是“单向数据流”，通过将应用的状态存储在一个可预测的状态树中，Redux 能够使得应用的状态变得可控和可预测。在本文中，我们将介绍如何在 React 中使用 Redux 来管理应用的状态。
Redux 的核心概念
在开始介绍 Redux 的使用方法之前，我们先来了解一下 Redux 的核心概念。
Action
Action 是 Redux 中的一个概念，它是一个普通的 JavaScript 对象，用来描述应用中发生的事件。例如，当用户点击一个按钮时，可以触发一个 Action，用来表示这个按钮被点击了。一个 Action 通常包含两个属性：
- type：表示 Action 的类型。
- payload：表示 Action 的数据。
例如，一个表示按钮被点击的 Action 可以是这样的：
{
type: 'BUTTON_CLICKED',
payload: {
buttonId: 'submit'
}
}Reducer
Reducer 是 Redux 中的另一个概念，它是一个纯函数，用来根据 Action 更新应用的状态。Reducer 接收两个参数：
- state：表示当前的应用状态。
- action：表示当前发生的 Action。
Reducer 的返回值是一个新的状态对象，它描述了应用在当前 Action 下的状态。
例如，一个用来更新按钮状态的 Reducer 可以是这样的：
-- -------------------- ---- -------
-------- ------------------- - --- ------- -
------ ------------- -
---- -----------------
------ -
---------
-------------------------- ----
--
--------
------ ------
-
-Store
Store 是 Redux 中的一个概念，它是应用的状态管理中心。Store 包含了应用的状态树，以及用来更新状态树的 Reducer。在 React 中，Store 通常是在应用的根组件中创建的。
Action Creator
Action Creator 是 Redux 中的一个概念，它是一个函数，用来创建 Action。Action Creator 通常会接收一些参数，用来生成 Action 的 payload。
例如，一个用来创建按钮点击 Action 的 Action Creator 可以是这样的：
function buttonClicked(buttonId) {
return {
type: 'BUTTON_CLICKED',
payload: {
buttonId
}
};
}在 React 中使用 Redux
在 React 中使用 Redux 的步骤如下：
安装 Redux 和 React-Redux。
npm install redux react-redux
创建一个 Reducer。
-- -------------------- ---- ------- -------- ------------------- - --- ------- - ------ ------------- - ---- ----------------- ------ - --------- -------------------------- ---- -- -------- ------ ------ - -创建一个 Store。
import { createStore } from 'redux'; import buttonReducer from './reducers/buttonReducer'; const store = createStore(buttonReducer);在根组件中使用 Provider 组件来传递 Store。
-- -------------------- ---- ------- ------ - -------- - ---- -------------- ------ ----- ---- ---------- -------- ----- - ------ - --------- -------------- --- ------- --- ----------- -- -在组件中使用 connect 函数来连接 Store 和组件。
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ------ - ------------- - ---- --------------------------- -------- -------- --------- -------- ------- -- - ------ - ------- ----------- -- ------------------------------- -- - ----- --------------- - ------- --------- -- -- -------- ------------------------ --- ----- ------------------ - - -------- ------------- -- ------ ------- ------------------------ ----------------------------
在上面的代码中，我们使用 connect 函数将 Button 组件连接到了 Store 上。connect 函数接收两个参数：
- mapStateToProps：用来将 Store 中的状态映射到组件的 props 中。
- mapDispatchToProps：用来将 Action Creator 映射到组件的 props 中。
在 Button 组件中，我们使用了 mapStateToProps 函数将 Store 中的状态映射到了组件的 clicked 属性中。我们还使用了 mapDispatchToProps 函数将 buttonClicked Action Creator 映射到了组件的 onClick 属性中。这样，当用户点击按钮时，就会触发一个 Action，从而更新 Store 中的状态。
总结
在本文中，我们介绍了 Redux 的核心概念，包括 Action、Reducer、Store 和 Action Creator。我们还介绍了如何在 React 中使用 Redux，包括创建 Reducer、创建 Store、使用 Provider 组件传递 Store，以及使用 connect 函数连接 Store 和组件。通过使用 Redux，我们能够更加可控和可预测地管理应用的状态，从而使得应用的开发变得更加高效和灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c17ddeadd4f0e0ffb73cbc