使用Redux Toolkit时无法修改状态值的技术问题求助

核心问题 #

Redux Toolkit 的 slice reducers 必须是同步纯函数，你在 fetchData reducer 中使用 async/await 执行异步请求，会导致 reducer 返回 Promise 而非修改后的状态，Redux 无法识别这种异步逻辑，因此无法正确更新状态。

修复步骤 #

使用 Redux Toolkit 提供的 createAsyncThunk 处理异步请求，再通过 extraReducers 监听异步动作的状态来更新 Redux 状态。

修正后的完整代码 #

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { config } from '../../config';
import axios from 'axios';

// 1. 创建异步Thunk，处理数据请求
export const fetchVideoData = createAsyncThunk(
  'video/fetchData',
  async () => {
    const response = await axios.get(`${config.url}/v1/videos`);
    // 注意：axios响应的实际数据在response.data中，按需提取
    return response.data;
  }
);

const initialState = {
  VideoData: 'empty',
  // 可选：添加加载状态和错误状态
  loading: false,
  error: null
};

const VideoSlice = createSlice({
  name: 'VideoSlice',
  initialState,
  reducers: {
    // 这里放同步的状态更新逻辑（如果需要）
  },
  // 2. 通过extraReducers监听异步Thunk的状态
  extraReducers: (builder) => {
    builder
      // 请求发起时
      .addCase(fetchVideoData.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      // 请求成功时
      .addCase(fetchVideoData.fulfilled, (state, action) => {
        state.loading = false;
        state.VideoData = action.payload;
      })
      // 请求失败时
      .addCase(fetchVideoData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || '请求失败';
      });
  }
});

// 导出异步action和reducer
export default VideoSlice.reducer;

组件中使用 #

在组件里 dispatch 这个异步 action 即可触发数据请求和状态更新：

import { useDispatch } from 'react-redux';
import { fetchVideoData } from './path/to/VideoSlice';

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

  useEffect(() => {
    dispatch(fetchVideoData());
  }, [dispatch]);

  // ...其他逻辑
}

额外说明 #

• 不要在 slice 的 reducers 字段中写异步逻辑，这个字段仅用于同步的状态修改。
• axios 返回的响应对象包含很多元数据（如状态码、headers等），通常我们只需要 response.data 里的业务数据，注意按需提取。

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