redux-toolkit extraReducers 没有被调用

ank*_*itm 4 typescript reactjs redux redux-toolkit

我正在尝试 createAsyncThunk 但无法触发 extraReducers。这是我现在所拥有的:

export const getAllAgents = createAsyncThunk(
  "getAllAgents",
  async (token: string) => {
    let headers = new Headers();
    headers.append("Authorization", `Bearer ${token}`);
    headers.append("Content-Type", "application/json");
    const response = await fetch(`${API.endpoint}/data/agent`, {
      method: "get",
      headers,
      redirect: "follow",
    });
    const data = await response.json();
    console.log("Response in thunk: ", { data });
    return data;
  }
);

export const agentSlice = createSlice({
  name: "agentSlice",
  initialState,
  reducers: {},
  extraReducers:
    //builder call back required for typesafety
    //https://redux-toolkit.js.org/usage/usage-with-typescript#type-safety-with-extrareducers
    (builder) => {
      console.log(createNewAgent.fulfilled);
      builder.addCase(createNewAgent.fulfilled, (state, action) => {
        console.log("fulfilled action", { action });
      });
      console.log(getAllAgents.fulfilled);
      builder.addCase(getAllAgents.fulfilled, (state, action) => {
        state.agents = action.payload.agents;
      });
    },
});

Run Code Online (Sandbox Code Playgroud)

我还看到开发工具中调用了已完成的操作: 在此输入图像描述

有什么不对吗?

Hoj*_*esi 5

我有同样的问题。我的错误是我在 extraReducers 之外添加了减速器。

这是错误的:

const authSlice = createSlice({
  name: 'auth',
  initialState,
  extraReducers: {
    [login.fulfilled]: (state, action) => {},
   },
   [signUp.fulfilled]: state => {}
}
Run Code Online (Sandbox Code Playgroud)