将额外的参数传递给 redux 工具包中的 thunk payload

Question

我正在使用 createAsyncThunk 方法处理带有 RTK 的 api 请求。

但是，我无法将额外的参数传递给 thunk 的 fulfilled 响应。我只能从返回的承诺中获取数据。

返回的承诺有这个数据：

{ items: [ [Object], [Object] ], metadata: {} }

动作：

export const getGroupsBySchoolId = createAsyncThunk(
  'groups/getGroupsBySchoolId',
  async (schoolId, _thunkAPI) => {
    const { items } = await fetch(someUrl); // simplified fetch request

    return { items, schoolId }; // this won't work in the reducer, only if I unwrap() the promise in the component
  },
);

在构建器的切片中，我试图获得 schoolId，但我只得到返回的承诺。

builder.addCase(getGroupsBySchoolId.fulfilled, (state, action) => {
  // console.log(action);
  const schoolId = action.payload.items.length > 0 ? action.payload.items[0].parentId : null; // i want to avoid this an get it from the payload
  state.items[schoolId] = action.payload.items;
  state.loading = false;
});

console.loging action 的输出，当然是返回的 promise 和 action 类型：

{
        type: 'groups/getGroupsBySchoolId/fulfilled',
        payload: { items: [ [Object], [Object] ], metadata: {} }
      }

我可以创建一个常规的 reducer 并在 promise 得到解决后调度它，但这听起来有点矫枉过正 - 我认为 - 应该在 fulfilled 构建器回调中解决。

Answer 1

根据你最后的评论，我明白你在问什么 - 你想知道如何访问 reducer 中的 thunk 参数。

换句话说，鉴于此：

dispatch(getGroupsBySchoolId(123))

您希望能够在操作到达减速器时在某处看到值 123。

好消息是这很容易！具体来说，对于 createAsyncThunk，thunk 参数将始终作为 action.meta.arg 可用。所以，这应该有效：

builder.addCase(getGroupsBySchoolId.fulfilled, (state, action) => {
  // console.log(action);
  const schoolId = action.meta.arg;
  state.items[schoolId] = action.payload.items;
  state.loading = false;
});

将额外的参数传递给 redux 工具包中的 thunk payload

Pass extra arguments to thunk payload in redux toolkit

redux

redux-toolkit