Redux Toolkit Extra Reducer获取API数据失效问题求助

核心错误点 #

代码里导致数据加载失败的关键问题有以下几个：

1. 组件中Dispatch调用错误 #

在DataTest组件的useEffect里，你直接传递了getIndustryData函数给dispatch，但异步Thunk需要调用后才会返回可被dispatch的action对象。

2. ExtraReducers配置位置错误 #

在createSlice中，你把extraReducers写在了reducers对象内部，这是错误的。它应该和reducers同级，作为createSlice的顶层配置项。

3. IndustryData赋值逻辑错误 #

在fulfilled回调里，你用forEach遍历并push元素，然后把forEach的返回值（undefined）赋值给state.industryData，这会直接清空数组。另外，Axios的响应数据通常在response.data里，直接返回整个response对象也可能导致数据结构不符。

4. Reducer中直接替换state对象的错误 #

在update和reset reducer里，直接给state赋值新对象不符合Redux Toolkit的Immer使用规范，会导致状态更新不生效。

修正后的完整代码 #

1. 修正后的Analysis Slice代码 #

import { createSlice, createAsyncThunk} from "@reduxjs/toolkit";
import db from '../../components/apis/db'

export const getIndustryData = createAsyncThunk(
  'analysis/getIndustryData',
  async () => {
    // Axios响应数据在response.data字段中，直接返回该数据
    const response = await db.get("/getTable/industries")
    return response.data;
  }
);

const initialState = {
  revenue: 5000000000,
  spend: 10000000,
  industryData: [],
  fetchDataStatus: "",
}

export const analysisSlice = createSlice({
  name: 'analysis',
  initialState,
  reducers: {
    update: (state, action) => {
      // 用Object.assign合并新状态，符合Immer规范
      Object.assign(state, action.payload);
    },
    reset: (state) => {
      // 返回初始状态，Immer会自动处理状态替换
      return initialState;
    },
  },
  // extraReducers与reducers同级配置
  extraReducers: (builder) => {
    builder
      .addCase(getIndustryData.pending, (state) => {
        state.fetchDataStatus= "pending";
      })
      .addCase(getIndustryData.fulfilled, (state, action) => {
        state.fetchDataStatus= "fulfilled";
        // 直接赋值API返回的数组，无需额外遍历
        state.industryData = action.payload;
      })
      .addCase(getIndustryData.rejected, (state) => {
        state.fetchDataStatus= "rejected";
        // 请求失败时清空数据，可根据需求调整
        state.industryData = [];
      })
  }
});

export const { update, reset} = analysisSlice.actions;
export default analysisSlice.reducer

2. 修正后的DataTest组件代码 #

const DataTest = () => {
  const analysisParams = useSelector((state) => state.analysis)  
  const dispatch = useDispatch()
    
  useEffect(() => {
    // 调用getIndustryData生成action后再dispatch
    dispatch(getIndustryData())
  }, [dispatch])
    
  return (
    <div style={{ display: "block", width: 300 }}>
      <h3>Global paramaters:</h3>
      <p>{JSON.stringify(analysisParams)}</p>
    
      <h3>Industry Data:</h3>
      <p style={{ padding: 20 }}>
        {JSON.stringify(analysisParams.industryData)}
      </p>
    </div>
  )
}

export default DataTest

额外注意事项 #

• 确保Redux Store已正确配置该slice的reducer，比如在configureStore中添加analysis: analysisReducer
• 如果API返回的不是数组，需要根据实际数据结构调整fulfilled回调中的赋值逻辑
• useEffect依赖数组中添加dispatch，符合React Hooks的依赖规范

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