Redux 实战 —— 电商模块

Redux 是 React 生态圈中重要的一个库，用于管理应用程序的状态。本文将介绍如何在电商模块中使用 Redux，实现状态的统一管理。

安装 Redux

使用 npm 或 yarn 进行安装：

npm install redux

yarn add redux

定义模块状态

在电商模块中，我们需要管理购物车、商品列表等状态。使用 Redux，我们可以通过定义模块状态来统一管理这些状态。

const initialState = {
  productList: [],
  cartItems: [],
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_PRODUCT_LIST':
      return { ...state, productList: action.payload };
    case 'ADD_TO_CART':
      return { ...state, cartItems: [...state.cartItems, action.payload] };
    case 'REMOVE_FROM_CART':
      return {
        ...state,
        cartItems: state.cartItems.filter(item => item.id !== action.payload),
      };
    default:
      return state;
  }
}

通过 initialState 定义初始状态，然后定义一个 reducer 函数，用于处理各种类型的操作。在这个例子中，我们处理了设置商品列表、添加到购物车和从购物车中移除等操作。

创建 Store

Store 是状态的统一管理器，用于监听状态变化并修改状态。创建 Store 可以使用 createStore 函数。

import { createStore } from 'redux';

const store = createStore(reducer);

使用 createStore 函数创建一个 Store，并传入我们定义的 reducer 函数。

操作状态

Redux 提供了 dispatch 函数，用于派发操作。在这个例子中，我们可以通过 dispatch 来设置商品列表、添加到购物车和从购物车中移除等操作。

store.dispatch({
  type: 'SET_PRODUCT_LIST',
  payload: [
    { id: 1, name: 'Apple', price: 10 },
    { id: 2, name: 'Banana', price: 5 },
    { id: 3, name: 'Orange', price: 3 },
  ],
});

store.dispatch({
  type: 'ADD_TO_CART',
  payload: { id: 1, count: 1 },
});

store.dispatch({
  type: 'REMOVE_FROM_CART',
  payload: 1,
});

获取状态

使用 getState 函数可以获取当前状态。

const state = store.getState();
console.log(state);

订阅状态变化

Store 提供了 subscribe 函数，用于订阅状态的变化。在状态变化时，我们可以进行一些操作，如重新渲染 UI 界面等。

store.subscribe(() => {
  const state = store.getState();
  console.log(state);
});

示例代码

完整代码如下：

import { createStore } from 'redux';

const initialState = {
  productList: [],
  cartItems: [],
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_PRODUCT_LIST':
      return { ...state, productList: action.payload };
    case 'ADD_TO_CART':
      return { ...state, cartItems: [...state.cartItems, action.payload] };
    case 'REMOVE_FROM_CART':
      return {
        ...state,
        cartItems: state.cartItems.filter(item => item.id !== action.payload),
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

store.subscribe(() => {
  const state = store.getState();
  console.log(state);
});

store.dispatch({
  type: 'SET_PRODUCT_LIST',
  payload: [
    { id: 1, name: 'Apple', price: 10 },
    { id: 2, name: 'Banana', price: 5 },
    { id: 3, name: 'Orange', price: 3 },
  ],
});

store.dispatch({
  type: 'ADD_TO_CART',
  payload: { id: 1, count: 1 },
});

store.dispatch({
  type: 'REMOVE_FROM_CART',
  payload: 1,
});

总结

在本文中，我们介绍了如何在电商模块中使用 Redux，通过定义模块状态、创建 Store、操作状态和订阅状态变化来统一管理状态。在实际开发中，通过 Redux 管理状态可以帮助我们减少代码复杂度，提高代码可维护性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b26716add4f0e0ffb9232c