CODEWITHSUNDEEP
reactjsredux-toolkit
Mo1
Mo1

Reputation: 379

Passing multiple params in Redux Toolkit's createAsyncThunk

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?

Upvotes: 1

Views: 4628

Answers (1)

Alserda
Alserda

Reputation: 4734

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) {
    ...
  }
};

Upvotes: 3

Related Questions