Redux异步Action传参失败问题解决求助

问题核心 #

你的loadData异步Thunk定义时，参数是解构对象({ pageNo, language })，但调用时却传入两个独立参数loadData(1, "ruby")，导致解构出的pageNo和language都是undefined，最终请求URL参数异常。同时代码里还有几处逻辑错误会影响功能运行，以下是分步修正方案：

分步修复 #

1. 修正异步Thunk的调用方式 #

Thunk接收的是对象参数，调用时需传入包含pageNo和language的对象：

React.useEffect(() => {
  dispatch(loadData({ pageNo: 1, language: "ruby" }));
}, [dispatch]);

2. 修正Thunk内部的异步处理 #

data.json()是异步操作，必须加await，否则返回的是Promise而非实际数据：

export const loadData = createAsyncThunk(
  "alldata/getdata",
  async ({ pageNo, language }, thunkAPI) => {
    const data = await fetch(
      `http://localhost:5000/scrape?pageNo=${encodeURIComponent(pageNo)}&language=${encodeURIComponent(language)}`
    );
    // 补充await获取实际JSON数据
    const json = await data.json();
    return json;
  }
);

3. 修正Slice中的Reducer逻辑 #

• Slice定义时必须用initialState而非state，符合Redux Toolkit规范
• addProject/removeProject不能直接返回数组操作结果，需直接修改state属性
• fulfilled回调中无需解构json，Thunk返回的就是原始数据
• 修正Reducer的导出方式

修正后的Slice代码：

const projectSlice = createSlice({
  name: "allprojects",
  initialState: {
    projectState: [],
    workingState: [],
    isLoading: false,
    hasError: false,
  },
  reducers: {
    addProject: (state, action) => {
      // 直接修改数组，无需return
      state.workingState.push(action.payload);
    },
    removeProject: (state, action) => {
      // 替换为过滤后的数组
      state.workingState = state.workingState.filter(
        (project) => project.id !== action.payload.id
      );
    },
  },
  extraReducers: {
    [loadData.pending]: (state) => {
      state.isLoading = true;
      state.hasError = false;
    },
    [loadData.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.hasError = false;
      // 将返回数据存入state
      state.projectState = action.payload;
    },
    [loadData.rejected]: (state) => {
      state.isLoading = false;
      state.hasError = true;
    },
  },
});

export const { addProject, removeProject } = projectSlice.actions;
// 正确导出reducer
export const Projectreducer = projectSlice.reducer;
export const selectAllPosts = (state) => state.allprojects.projectState;

4. 依赖补充 #

useEffect需将dispatch加入依赖数组，避免不必要的重复执行。

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