合并reducer，分而治之：combineReducers与actionCreators

2023-09-27 21:53:06

引言
Redux是当今最流行的状态管理库之一，它为构建大型可预测的JavaScript应用程序提供了一种简单而优雅的方式。Redux的核心思想是将应用程序的状态存储在一个单一的对象中，称为store。Store中的数据可以由应用程序的任何组件访问和修改，而Redux提供了一系列工具来管理state的更新和同步。

combineReducers：分而治之

在Redux中，reducer函数是用于更新state的纯函数。reducer函数接收两个参数：当前的state和一个action，并返回一个新的state。随着应用程序的增长，state会变得越来越复杂，因此将state和逻辑存储在一个reducer函数中会变得越来越困难。

combineReducers是Redux中用于拆分管理state的工具。它允许我们按照特定的结构拆分state，并将其分配给多个reducer函数。每个reducer函数只负责更新state的一部分，这样可以使代码更易于维护和理解。

使用combineReducers拆分state的步骤如下：

定义多个reducer函数，每个reducer函数只负责更新state的一部分。
使用combineReducers函数将这些reducer函数组合成一个单一的reducer函数。
将组合后的reducer函数传递给Redux的createStore函数，即可创建Redux store。

actionCreators：定义action的工厂函数

在Redux中，action是应用程序状态变化的一种简单对象。action由一个type属性和一个payload属性组成。type属性标识action的类型，payload属性包含action的数据。

actionCreators是定义action的工厂函数。它允许我们创建可重用的action，并使action的创建更加简单和一致。

定义actionCreator的步骤如下：

定义一个函数，该函数接收action的payload作为参数，并返回一个action对象。
将actionCreator导出，以便其他组件可以调用它。

实例演示

为了更好地理解combineReducers和actionCreators的使用方法，我们来看一个实例。假设我们有一个Redux应用程序，需要管理以下数据：

用户信息：包括用户名、密码、电子邮件等。
产品列表：包括产品名称、价格、库存数量等。
购物车：包括购物车中的产品列表和总价。

我们可以使用combineReducers将state拆分成三个部分：用户信息、产品列表和购物车，并分别定义三个reducer函数来更新这三个部分。

// 用户信息reducer
const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        isLoggedIn: true,
        username: action.payload.username,
        password: action.payload.password,
        email: action.payload.email,
      };
    case 'LOGOUT':
      return {
        ...state,
        isLoggedIn: false,
        username: '',
        password: '',
        email: '',
      };
    default:
      return state;
  }
};

// 产品列表reducer
const productsReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_PRODUCT':
      return [
        ...state,
        {
          id: action.payload.id,
          name: action.payload.name,
          price: action.payload.price,
          quantity: action.payload.quantity,
        },
      ];
    case 'REMOVE_PRODUCT':
      return state.filter(product => product.id !== action.payload.id);
    default:
      return state;
  }
};

// 购物车reducer
const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TO_CART':
      const product = state.find(product => product.id === action.payload.id);
      if (product) {
        return state.map(product => {
          if (product.id === action.payload.id) {
            return {
              ...product,
              quantity: product.quantity + 1,
            };
          } else {
            return product;
          }
        });
      } else {
        return [
          ...state,
          {
            id: action.payload.id,
            name: action.payload.name,
            price: action.payload.price,
            quantity: 1,
          },
        ];
      }
    case 'REMOVE_FROM_CART':
      return state.filter(product => product.id !== action.payload.id);
    default:
      return state;
  }
};

// 组合reducer
const rootReducer = combineReducers({
  user: userReducer,
  products: productsReducer,
  cart: cartReducer,
});

接下来，我们可以定义actionCreators来创建action。

// 用户信息actionCreators
export const login = (username, password, email) => {
  return {
    type: 'LOGIN',
    payload: {
      username,
      password,
      email,
    },
  };
};

export const logout = () => {
  return {
    type: 'LOGOUT',
  };
};

// 产品列表actionCreators
export const addProduct = (id, name, price, quantity) => {
  return {
    type: 'ADD_PRODUCT',
    payload: {
      id,
      name,
      price,
      quantity,
    },
  };
};

export const removeProduct = (id) => {
  return {
    type: 'REMOVE_PRODUCT',
    payload: {
      id,
    },
  };
};

// 购物车actionCreators
export const addToCart = (id, name, price) => {
  return {
    type: 'ADD_TO_CART',
    payload: {
      id,
      name,
      price,
    },
  };
};

export const removeFromCart = (id) => {
  return {
    type: 'REMOVE_FROM_CART',
    payload: {
      id,
    },
  };
};