Can I access state inside a createAsyncThunk w/axios with redux toolkit?

Question

I'm fairly new to redux toolkit so I'm still having a few issues with it!

As per the code below, I'm trying to access state (loginDetails.username and loginDetails.password) inside my createAsyncThunk. I'm obviously doing something wrong here - I've tried writing the createAsyncThunk function inside a different file, attempting to access the state inside that file and then importing the function, but either way it's failing.

// Import: Packages
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

// AsyncThunk: getUserDetails
export const getUserDetails = createAsyncThunk(
  "userDetails/getUserDetails",
  async () => {
    try {
      const apiUrl = process.env.REACT_APP_URL;

      var config = {
        method: "get",
        url: `${apiUrl}/claimSet?UserName=${state.loginDetails.username}&Password=${state.loginDetails.password}`,
        headers: {
          accept: "application/json",
        },
      };

      const response = await axios(config);
      const data = await response.data;
      return data;
    } catch (error) {
      console.log(error);
    }
  }
);

// Slice: userDetailsSlice
export const userDetailsSlice = createSlice({
  name: "userDetails",
  initialState: {
    loginDetails: {
      username: "",
      password: "",
    },
    details: [],
    status: null,
  },
  reducers: {
    addUsername: (state, { payload }) => {
      state.loginDetails.username = payload;
    },
    addPassword: (state, { payload }) => {
      state.loginDetails.password = payload;
    },
  },
  extraReducers: {
    [getUserDetails.pending]: (state, action) => {
      state.status = "loading";
    },
    [getUserDetails.fulfilled]: (state, { payload }) => {
      state.details = payload;
      state.status = "success";
    },
    [getUserDetails.rejected]: (state, action) => {
      state.status = "failed";
    },
  },
});

// Actions: addUsername, addPassword
export const { addUsername, addPassword } = userDetailsSlice.actions;

// Reducer: userDetailsSlice.reducer
export default userDetailsSlice.reducer;

The code in the config url ${state.loginDetails.username}, etc. is just one of many failed attempts to get hold of the state. I understand that part of the issue is that the createAsyncThunk is declared before the state/slide is below, but I still can't seem to find a way around it.

Any help would be really appreciated!

Thanks in advance <3

Answer 1

The async function consumes a "payload" argument, and secondly a thunkAPI object that contains a getState method.

payloadCreator

thunkAPI: an object containing all of the parameters that are normally passed to a Redux thunk function, as well as additional options:

• dispatch: the Redux store dispatch method
• getState: the Redux store getState method
• extra: the "extra argument" given to the thunk middleware on setup, if available
• requestId: a unique string ID value that was automatically generated to identify this request sequence
• signal: an AbortController.signal object that may be used to see if another part of the app logic has marked this request as needing cancelation.
• rejectWithValue: rejectWithValue is a utility function that you can return in your action creator to return a rejected response with a defined payload. It will pass whatever value you give it and return it in the payload of the rejected action.

// AsyncThunk: getUserDetails
export const getUserDetails = createAsyncThunk(
  "userDetails/getUserDetails",
  async (arg, { getState }) => { // <-- destructure getState method
    const state = getState(); // <-- invoke and access state object
    try {
      const apiUrl = process.env.REACT_APP_URL;

      var config = {
        method: "get",
        url: `${apiUrl}/claimSet?UserName=${state.loginDetails.username}&Password=${state.loginDetails.password}`,
        headers: {
          accept: "application/json",
        },
      };

      const response = await axios(config);
      const data = await response.data;
      return data;
    } catch (error) {
      console.log(error);
    }
  }
);