Redux Toolkit中updateCart Action未触发问题求助

场景代码 #

cartSlice 定义 #

import { createSlice } from '@reduxjs/toolkit';

export const cartSlice = createSlice({
  name: 'cartItems',
  initialState: {
    cartItems: 0
  },
  reducers: {
    updateCart: (state, action) => {
      console.log('action', action.payload);
      state.cartItems = action.payload;
    },
  },
});

export const { updateCart } = cartSlice.actions;

export default cartSlice.reducer;

调用Action的代码 #

updateCart(100);

Store 配置 #

import { configureStore } from '@reduxjs/toolkit';
import authSlice from './authSlice';
import tshirtsSlice from './tshirtsSlice';
import saveOrderSlice from './saveOrderSlice';
import cartSlice from './cartSlice';

export const store = configureStore({
  reducer: {
    user: authSlice,
    tshirts: tshirtsSlice,
    order: saveOrderSlice,
    cartItems: cartSlice,
  },
});

问题原因 #

直接调用updateCart(100)只是生成了一个Action对象，并没有将这个Action派发到Redux Store中。Redux的工作机制是：只有通过dispatch方法将Action发送给Store，Store才会调用对应的Reducer来更新状态，所以你的代码既不会报错，也不会触发updateCart里的逻辑。

解决方案 #

1. React组件中使用useDispatch钩子 #

在React组件内，需要通过react-redux提供的useDispatch获取dispatch函数，再用它发送Action：

import { useDispatch } from 'react-redux';
import { updateCart } from './cartSlice';

function CartComponent() {
  const dispatch = useDispatch();

  const handleUpdate = () => {
    // 通过dispatch发送Action
    dispatch(updateCart(100));
  };

  return <button onClick={handleUpdate}>设置购物车数量为100</button>;
}

2. 非React环境直接调用Store的dispatch #

如果是在工具函数、API请求回调等非React场景，直接导入Store实例调用dispatch：

import { store } from './store';
import { updateCart } from './cartSlice';

// 直接通过store.dispatch发送Action
store.dispatch(updateCart(100));

验证状态更新 #

可以用useSelector钩子获取最新的状态，确认更新是否生效：

import { useSelector } from 'react-redux';

function CartCount() {
  // 从Store中读取cartItems状态
  const cartCount = useSelector(state => state.cartItems.cartItems);
  return <div>当前购物车数量：{cartCount}</div>;
}

内容的提问来源于stack exchange，提问作者Azu