使用 Redux 管理 React 应用状态

在复杂的 React 应用中，管理组件状态变得越来越复杂，这时候引入 Redux 可以帮助我们更好地管理状态。Redux 是一个可预测状态容器，它可以帮助我们统一管理应用的状态，使得状态变化更加可控。本文将介绍如何在 React 应用中使用 Redux。

Redux 简介

Redux 是一个状态管理库，它提供了一种可预测的状态管理方案。Redux 的核心思想是将应用的状态存储在一个单一的 Store 中，并通过定义纯函数的方式来修改状态。Redux 的状态管理遵循以下三个原则：

单一数据源：整个应用的状态被存储在一个单一的 JavaScript 对象中。
状态是只读的：不能直接修改状态，只能通过派发 Action 来修改。
使用纯函数修改状态：使用纯函数（Reducers）来根据旧的状态和 Action 来计算新的状态。

Redux 基本概念

在 Redux 中，有几个核心概念需要理解：

Store：存储应用的状态，提供了一些方法来获取状态、派发 Action 和注册监听器。
Action：描述状态变化的对象，必须包含一个 type 属性来指明要执行的操作。
Reducer：纯函数，接收旧的状态和 Action，返回新的状态。
Dispatch：派发 Action 的方法，用于触发状态变化。
Subscribe：订阅状态变化的方法，可以注册监听器，监听状态的变化。

Redux 使用示例

下面是一个使用 Redux 的示例，实现了一个简单的加法功能：

// actions/count.js
import { COUNT_ADD } from "../constant";

export const createAddAction = data => ({ type: COUNT_ADD, data })

// reducers/count.js
import { COUNT_ADD } from '../constant';

const initState = 0;

export default function CountReducer(preState = initState, action) {
  const { type, data } = action;
  switch (type) {
    case COUNT_ADD:
      const { value1, value2 } = data;
      return value1 + value2;
    default:
      return preState;
  }
}

// store.js
import { createStore } from 'redux';

import countReducer from './reducers/count';

export default createStore(countReducer);

// ReduxDemo.js
import React, { Component } from 'react';
import { InputNumber, Button } from 'antd';

import { createAddAction } from './actions/count';
import Store from './store';

export default class ReduxDemo extends Component {
  state = {
    value1: 0,
    value2: 0,
  }

  componentDidMount() {
    Store.subscribe(() => {
      this.forceUpdate();
    });
  }

  add = () => {
    const { value1, value2 } = this.state;
    Store.dispatch(createAddAction({ value1, value2 }));
  }


  render() {
    const { value1, value2 } = this.state;
    const total = Store.getState();

    return (
      <div>
        <h2>加法</h2>
        <InputNumber value={value1} onChange={ val => this.setState({ value1: val }) } /> +
        <InputNumber value={value2} onChange={ val => this.setState({ value2: val }) } />
        <Button type="link" onClick={this.add}>=</Button>
        {total}
      </div>
    )
  }
}

在这里插入图片描述

在这个示例中，我们首先定义了一个 Action 和一个 Reducer，然后使用 createStore 方法创建了一个 Store，并将 Reducer 注册到 Store 中。在 React 组件中，通过调用 Store.dispatch 方法派发 Action，然后通过订阅 Store 的状态变化来更新组件的状态。