完整 React 项目开发 (一)：Redux 开篇-JavaScript中文网-JavaScript教程资源分享门户

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 可以是这样的：

function buttonReducer(state = {}, action) {
  switch (action.type) {
    case 'BUTTON_CLICKED':
      return {
        ...state,
        [action.payload.buttonId]: true
      };
    default:
      return state;
  }
}

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。

function buttonReducer(state = {}, action) {
  switch (action.type) {
    case 'BUTTON_CLICKED':
      return {
        ...state,
        [action.payload.buttonId]: true
      };
    default:
      return state;
  }
}

创建一个 Store。

import { createStore } from 'redux';
import buttonReducer from './reducers/buttonReducer';

const store = createStore(buttonReducer);

在根组件中使用 Provider 组件来传递 Store。

import { Provider } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      {/* 应用的其他组件 */}
    </Provider>
  );
}

在组件中使用 connect 函数来连接 Store 和组件。

import { connect } from 'react-redux';
import { buttonClicked } from '../actions/buttonActions';

function Button({ buttonId, clicked, onClick }) {
  return (
    <button onClick={() => onClick(buttonId)}>点击我</button>
  );
}

const mapStateToProps = (state, ownProps) => ({
  clicked: state[ownProps.buttonId]
});

const mapDispatchToProps = {
  onClick: buttonClicked
};

export default connect(mapStateToProps, mapDispatchToProps)(Button);

在上面的代码中，我们使用 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