Redux-Toolkit createAsyncThunk Dispatch 显示为未定义

Posted 2023-02-22

【中文标题】Redux-Toolkit createAsyncThunk Dispatch 显示为未定义

【英文标题】：Redux-Toolkit createAsyncThunk Dispatch is showing as undefined

【发布时间】：2020-10-27 21:29:36

【问题描述】：

使用 Redux-Toolkit，我尝试在 createAsyncThunk 内使用 ThunkAPI 和调度，但由于类型错误而被拒绝。不知道如何解决。

我的商店：

export const store = configureStore( 
    reducer: rootReducer, 
    middleware: [...getDefaultMiddleware()],
);

我的行动：

export const tester = createAsyncThunk(
    'tester',
    async (testData, dispatch) =>  
        await dispatch(load(true));
        const final = await someExternalFunc(testData)
        return final;
    
);

但是，我得到的输出是

任何帮助将不胜感激。

【问题讨论】：

请做一个reproducible的例子：How to create a Minimal, Reproducible Example，没有迹象表明它是错误的来源，最好做一个沙箱codesandbox，并请添加实际代码而不是图像。

除了解构 thunkAPI 对象之外，您是否可以将整个对象传入并查看那里是否定义了调度方法？

@OmarNasr，即使我有thunkAPI 而不是dispatch，当我执行console.log 时，我会得到未定义的thunkAPI。

你在哪里以及如何发送这个 thunk？ （此外，如果您不自定义任何内容，则无需在该商店设置 sn-p 中自己致电 getDefaultMiddleware() - 您可以完全忽略它。）

所以你不要调用tester 对，显示整个代码。

【参考方案1】：

根据您的评论，您没有正确调用 thunk。

调用test()会返回一个动作，那么你应该调度这个动作：

const fetchTodo = createAsyncThunk("todo/fetchTodo", async (args, thunkAPI) => 
  console.log(thunkAPI, "thunkAPI");
  const response = await todoAPI();
  return JSON.stringify(response);
);

dispatch(test(testData));

【讨论】：

谢谢你，我已经试过了，但我的用例是等到 promise 解决后才设置我的反应状态来触发另一个事件。请建议即使没有 createAsyncThunk 也可以做到这一点

如果没有我之前提到的可重现的例子，就帮不了你。

这是codeandboxcodesandbox.io/s/redux-toolkit-pdpsk?file=/src/features/todo/…当我们点击fetchTodo，我们可以在控制台看到undefined

@sai codesandbox.io/s/redux-toolkit-bwbzd?file=/src/features/todo/…，您记录的是 args 而不是 thunkAPI

请帮助我如果我做错了，如何从这里访问 getState 和 Dispatch？