Redux Toolkit: Async Dispatch won't work in react-native

Question

I'm trying to make some async actions with redux toolkit in react-native. The project runs on redux without any issues, beside the implementation issues for createAsyncThunk.

I used the same logic as described in the docs

Within my Slice, I'm creating the createAsyncThunk Object as follows:

export const fetchAddressList = createAsyncThunk('/users/fetchAddresses', async(thunkAPI) => {
    const state = thunkAPI.getState();
    console.log("THUNK state.loggedIn: "+state.loggedIn);
    if(state.loggedIn){
        return apiHelper.getAddressDataAsync();
    }
});

It only differs in the export tag before const tag compared to the docs. I had to make it in order to access the fetchAddressList from outside. The apiHelper.getAddressDataAsync() is an async method, that returns the result of a fetch.

Than I added the extraReducers attribute to my slice object.

export const appDataSlice = createSlice({
  name: "appDataReducer", 
  initialState:{
    //Some initial variables.
  },
  reducers: {
    //Reducers...
  },
  extraReducers: (builder) => {
    builder.addCase(fetchAddressList.fulfilled, (state, action) => {
        console.log("FULLFILLED::: ",action.payload);
        state.addressList = action.payload.addressList;
        state.defaultAddressId = action.payload.defaultAddressId;
    })
  }
});

export const { /*REDUCER_METHOD_NAMES*/ } = appDataSlice.actions;

This slice is stored in the store using configureStore, among other slices, that are definitely working fine.

Calling the fetchAddressList() method using dispatch doesn't do anything:

dispatch(fetchAddressList());

What exactly am I doing wrong here? Would appreciate any hints.

Edit: Are there configurations required within the configureStore()-method when creating the store object?

This is how I create the store object:

export const store = configureStore({
    reducer: {
      /*Other reducer objects....,*/
      appDataReducer: appDataSlice.reducer
    },
});

Maybe something is missing here...

Answer 1

It was due to wrong usage of the createAsyncThunk()-method. I'd passed the thunkAPI to be as the first (and only) parameter to the inner method, which was linked to user arguments passed through parameters into the initial dispatch method (like dispatch(fetchAddressList("ARG_PASSED_TO_FIRST_PARAMETER_OF_ASNYCTHUNK"));). However thunkAPI is being injected into the second parameter of createAsyncThunk()-method and as a result thunkAPI was undefined, since I hadn't passed any parameters by calling dispatch(fetchAddressList());

It was odd, to not have any errors / exceptions calling a method of an undefined object though => thunkAPI.getState().

The solution is to use the second parameter for thunkAPI. You do have two options by doing so.

1 - Either load the whole thunkAPI into the second parameter and use it as so:

export const fetchAddressList = createAsyncThunk('/users/fetchAddresses', async(args, thunkAPI) => {
    console.log("TEST: ", thunkAPI.getState());
    thunkAPI.dispatch(...);
});

2 - Or load exported methods by the thunkAPI:

export const fetchAddressList = createAsyncThunk('/users/fetchAddresses', async(args,{getState, dispatch}) => {
    console.log("TEST: ", getState());
    dispatch(...);
});

Both ways will work. Happy coding :)