Using Redux-Toolkit, I am trying to use ThunkAPI & dispatch inside an createAsyncThunk but I am getting rejected because of type error. Not sure how to resolve this.

my store:

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

my Action:

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

but, I am getting output as

Any help will be really appreciated.

Using Redux-Toolkit, I am trying to use ThunkAPI & dispatch inside an createAsyncThunk but I am getting rejected because of type error. Not sure how to resolve this.

my store:

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

my Action:

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

but, I am getting output as

Any help will be really appreciated.

• javascript
• reactjs
• redux
• redux-thunk
• redux-toolkit

Share Improve this question Follow edited Jul 7, 2020 at 15:19 Dennis Vash 54.1k1212 gold badges119119 silver badges132132 bronze badges asked Jul 7, 2020 at 15:12 saisai 53311 gold badge55 silver badges1212 bronze badges 7

• Please make a reproducible example: How to create a Minimal, Reproducible Example, there is no indication that it is the source of the error, better make a sandbox codesandbox, and please add actual code instead of images. – Dennis Vash Commented Jul 7, 2020 at 15:19
• Instead of destructuring the thunkAPI object could you pass the full object in and see if the dispatch method is defined there ? – Omar Nasr Commented Jul 7, 2020 at 15:22
• @OmarNasr, even If I have thunkAPI instead of {dispatch} I am getting thunkAPI as undefined when I do a console.log. – sai Commented Jul 7, 2020 at 15:32
• Where and how are you dispatching this thunk? (Also, you shouldn't need to call getDefaultMiddleware() yourself in that store setup snippet if you're not customizing anything - you can leave it out entirely.) – markerikson Commented Jul 7, 2020 at 15:34
• So you don't calling tester right, show the whole code. – Dennis Vash Commented Jul 7, 2020 at 15:35

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 3

According to your ment, you are not calling the thunk right.

Calling test() returns an action, then you should dispatch the action:

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

dispatch(test(testData));