title: Multiple args using createAsyncThunk
body: <p>I try to rewrite authentication tutorial from javascript into typescript. I encounter a problem as for createAsyncThunk arguments.</p>
  <p>store.ts</p>
  <pre><code>import { configureStore } from &quot;@reduxjs/toolkit&quot;;
  import userReducer from './features/user';
  
  export const store = configureStore({
      reducer: {
          user: userReducer,
      },
      devTools: true
  })
  
  export type RootState = ReturnType&lt;typeof store.getState&gt;;
  export type AppDispatch = typeof store.dispatch;
  </code></pre>
  <p>user.ts<br />
  It seams there are some issue with arguments, any idea how to manage it using typescript?</p>
  <pre><code>import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
  import {RootState} from &quot;../store&quot;
  import { API_URL } from &quot;../config/index&quot;;
  
  
  export interface UserState {
    isAuthenticated: boolean,
    user: null,
    loading: boolean,
    registered: boolean
  }
  
  const initialState: UserState = {
      isAuthenticated: false,
      user: null,
      loading: false,
      registered: false
  }
  
  export const register = createAsyncThunk('/api/user/create/', async ({name, email, password}, thunkAPI) =&gt; {
  
    const body = JSON.stringify({name, email, password})
  
    try {
  
      const res = await fetch(`${API_URL}/api/user/create/`, {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
        body
      })
  
      // const data: UserState[] = await res.json();
      const data = await res.json();
  
      if (res.status === 201) {
        return data;
      } else {
        return thunkAPI.rejectWithValue(data);
      }
        
    } catch(err: any) {
      return thunkAPI.rejectWithValue(err.response.data);
    }
  });
  
  const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
      resetRegistered(state) {
          state.registered = false;
        },
    },
    extraReducers: builder =&gt; {
      builder
        .addCase(register.pending, state =&gt; {
        state.loading = true;
      })
        .addCase(register.fulfilled, state =&gt; {
          state.loading = false;
          state.registered = true;
        })
        .addCase(register.rejected, state =&gt; {
          state.loading = false;
        })
    }
  })
  export const selectUser = (state: RootState) =&gt; state.user;
  export const { resetRegistered } = userSlice.actions
  export default userSlice.reducer
  </code></pre>
  <p>Register.tsx   (here I get error when dispatch register() -&gt; Expected 0 arguments, but got 1)</p>
  <pre><code>import { useState } from &quot;react&quot;;
  import Layout from '../components/Layout';
  import { Navigate } from &quot;react-router-dom&quot;;
  import { MDBInput} from &quot;mdb-react-ui-kit&quot;;;
  import { useAppDispatch, useAppSelector } from '../hooks'
  import { register, selectUser } from '../features/user';
  
  const initialState = {
    name: &quot;&quot;,
    email: &quot;&quot;,
    password: &quot;&quot;,
    confirmPassword: &quot;&quot;,
  }
  
  const RegisterPage = () =&gt; {
    const [formData, setFormData] = useState(initialState);
  
    const {name, email, password, confirmPassword} = formData;
    const [showRegister, setShowRegister] = useState(false);
  
    const {registered, loading} = useAppSelector(selectUser);
    const dispatch = useAppDispatch();
  
    const handleChange = (e: any) =&gt; {
      setFormData({ ...formData, [e.target.name]: e.target.value})
    };
  
    const onSubmit = (e: any) =&gt; {
      e.preventDefault();
       
      dispatch(register({name, email, password}));  //Expected 0 arguments, but got 1
    }
  
  
    if (registered) {
      return &lt;Navigate to='/login'/&gt;
    }
  
    return (
      &lt;Layout&gt;
            &lt;form onSubmit={onSubmit} className=&quot;mt-5&quot;&gt;
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;label htmlFor=&quot;name&quot; className=&quot;form-label&quot;&gt;
                &lt;MDBInput
                    type=&quot;text&quot;
                    name=&quot;name&quot;
                    value={name}
                    onChange={handleChange}
                    label=&quot;Name&quot;
                    className=&quot;form-control form-control-lg&quot;
                  /&gt;
                &lt;/label&gt;
  
                &lt;label htmlFor=&quot;email&quot; className=&quot;form-label&quot;&gt;
                &lt;MDBInput
                    type=&quot;email&quot;
                    name=&quot;email&quot;
                    value={name}
                    onChange={handleChange}
                    label=&quot;Email&quot;
                    className=&quot;form-control form-control-lg&quot;
                  /&gt;
                &lt;/label&gt;
                &lt;label htmlFor=&quot;password&quot; className=&quot;form-label&quot;&gt;
                &lt;MDBInput
                    type=&quot;password&quot;
                    name=&quot;password&quot;
                    value={name}
                    onChange={handleChange}
                    label=&quot;Password&quot;
                    className=&quot;form-control form-control-lg&quot;
                  /&gt;
                &lt;/label&gt;
              &lt;/div&gt;
              &lt;button 
                  className=&quot;btn btn-outline-light btn-lg px-5&quot; 
              &gt;
                  Register
              &lt;/button&gt;
            &lt;/form&gt;
  
      &lt;/Layout&gt;
    )
  }
  
  export default RegisterPage;
  </code></pre>