title: Can I access state inside a createAsyncThunk w/axios with redux toolkit?
body: <p>I'm fairly new to redux toolkit so I'm still having a few issues with it!</p>
  <p>As per the code below, I'm trying to access state (<code>loginDetails.username</code> and <code>loginDetails.password</code>) inside my <code>createAsyncThunk</code>. I'm obviously doing something wrong here - I've tried writing the <code>createAsyncThunk</code> function inside a different file, attempting to access the state inside that file and then importing the function, but either way it's failing.</p>
  <pre><code>// Import: Packages
  import { createSlice, createAsyncThunk } from &quot;@reduxjs/toolkit&quot;;
  import axios from &quot;axios&quot;;
  
  // AsyncThunk: getUserDetails
  export const getUserDetails = createAsyncThunk(
    &quot;userDetails/getUserDetails&quot;,
    async () =&gt; {
      try {
        const apiUrl = process.env.REACT_APP_URL;
  
        var config = {
          method: &quot;get&quot;,
          url: `${apiUrl}/claimSet?UserName=${state.loginDetails.username}&amp;Password=${state.loginDetails.password}`,
          headers: {
            accept: &quot;application/json&quot;,
          },
        };
  
        const response = await axios(config);
        const data = await response.data;
        return data;
      } catch (error) {
        console.log(error);
      }
    }
  );
  
  // Slice: userDetailsSlice
  export const userDetailsSlice = createSlice({
    name: &quot;userDetails&quot;,
    initialState: {
      loginDetails: {
        username: &quot;&quot;,
        password: &quot;&quot;,
      },
      details: [],
      status: null,
    },
    reducers: {
      addUsername: (state, { payload }) =&gt; {
        state.loginDetails.username = payload;
      },
      addPassword: (state, { payload }) =&gt; {
        state.loginDetails.password = payload;
      },
    },
    extraReducers: {
      [getUserDetails.pending]: (state, action) =&gt; {
        state.status = &quot;loading&quot;;
      },
      [getUserDetails.fulfilled]: (state, { payload }) =&gt; {
        state.details = payload;
        state.status = &quot;success&quot;;
      },
      [getUserDetails.rejected]: (state, action) =&gt; {
        state.status = &quot;failed&quot;;
      },
    },
  });
  
  // Actions: addUsername, addPassword
  export const { addUsername, addPassword } = userDetailsSlice.actions;
  
  // Reducer: userDetailsSlice.reducer
  export default userDetailsSlice.reducer;
  </code></pre>
  <p>The code in the config url <code>${state.loginDetails.username}</code>, etc. is just one of many failed attempts to get hold of the state. I understand that part of the issue is that the <code>createAsyncThunk</code> is declared before the state/slide is below, but I still can't seem to find a way around it.</p>
  <p>Any help would be really appreciated!</p>
  <p>Thanks in advance &lt;3</p>