Passing multiple params in Redux Toolkit's createAsyncThunk

Question

I have the following code where I want to send POST request in with a data object and a history function. How can I pass the history param in the action creator? Thanks

login action creator

import { createAsyncThunk } from '@reduxjs/toolkit';
import { client } from '../client';
import {User} from './userLoginSlice';


export const userLogin = createAsyncThunk('user/userLogin' , async (data: User, history: string,  thunkAPI)  => {
  try {
    const res = await client.post<User>('/User/Credentials/Login', data); 
    if(res.status === 200) history.push('/dashboard');
    return res.data;
  } catch (error) {
    return thunkAPI.rejectWithValue('Sorry! Something went wrong ):') ;
  }
});

login slice

import { createSlice } from '@reduxjs/toolkit';
import { userLogin } from './userLoginThunk';


export interface User{
 email: string;
 passowrd: string;
 rememberMe: boolean;
}


const initialState = {
  user:  {} as User,
  loading: false,
  error: ''
};

export const userLoginSlice = createSlice({
  name: 'user',
  initialState: initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(userLogin.pending, (state) => {
      state.loading = true;
      state.error = '';
    });
    builder.addCase(userLogin.fulfilled, (state, { payload }) => {
      state.loading = false;
      state.user = payload;
    });
    builder.addCase(userLogin.rejected, (state, { payload }) => {
      state.loading = false;
      state.error = String(payload);
    });
  }
});

export const userLoginReducer = userLoginSlice.reducer;

Using the action creator in a component

import { Form, Input, Checkbox } from 'antd';
import { useHistory } from 'react-router-dom';

import { ConfirmBtn } from '../small-components/ActionBtns';
import { useAppDispatch } from '../../custom-hooks/reduxCustomHooks';
import {userLogin } from 'src/redux/user-login/userLoginThunk';
import {User} from '../../redux/user-login/userLoginSlice';
import '../../sass/light-theme/user-login.scss';

export const UserLogin = () => {
  const dispatch = useAppDispatch();
  const history = useHistory();

  const onFinish = (values: User) => {
    dispatch(userLogin(values, history));
  };
  return (
   
   <Form></Form>  
  );
};

It's throwing the error which says that the userLogin expects 1 arguments but got 2. What am I doing wrong?

Does this answer your question? [How do you pass arguments to createAsyncThunk in redux toolkit?](https://stackoverflow.com/questions/64742747/how-do-you-pass-arguments-to-createasyncthunk-in-redux-toolkit) — Alserda, Feb 23 '22 at 16:33
i have a similar problem, because i have a topics.service.js, inside i have a function to make a post to backend, and i need to pass the token. And i can not pass the token from the component to the function in the dispatch, i receive a 'extra: {....a lot o things..}' — ddaudiosolutions, Jul 01 '22 at 18:28

score 3 · Answer 1 · answered Feb 23 '22 at 16:39

A thunk only accepts one parameter, so you would have to provide an object containing both your values and the history object.

In your case, you could also use the the unwrap() function (https://stackoverflow.com/a/67876542/3170628) so you don't have to provide the history object to your thunk:

const onFinish = async (values: User) => {
  try {
    await dispatch(userLogin(values)).unwrap();
    history.push('/dashboard');
  } catch (error) {
    ...
  }
};

Passing multiple params in Redux Toolkit's createAsyncThunk

1 Answers1