What are some common Redux Toolkit's CreateAsyncThunk use cases

Question

Could somebody please explain to me what and how to use createAsyncThunk like I'm 9 years old? What is the action string for? Is it temporarily created for logic/path reasons and destroyed soon later? What can I do with the action strings/what do people usually use it for? I've been staring at the documentation forever and I am not able to understand it.

This is how somebody else used the code, if somebody could decipher this I would be so happy.

const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {
  const data = await axios.post('/api', object);
  data.reduxRequestId = thunkAPI.requestId;
  return data;
}

Official documentation: https://redux-toolkit.js.org/api/createAsyncThunk

Answer 1

Well you can divide Async Thunk functions and Reducer functions into a separate types. They aren't exactly the same and you should notice that.

Reducer functions can't execute asyncronous code, they can execute code and update the state, but if you want to fetch or update something from a server, and then update the Redux state, you will not be able to achieve this solely by using reducer functions.

So, that's why we need Action creators (or AsyncThunk functions), which let us to execute asynchronous code and then update the actual state of Redux.

const action = 

you define a constant which receives (in this case) another function which is createAsyncThunk which receives two arguments the first one the action type and the second one the payloadCreator callback

const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {

so in this case action receives a predefined object (createAsyncThunk).

If you remember, to use a reducer function you usually need two parameters, one is actionType and the second one is the payload.

with the createAsyncThunk the first parameter it receives is the actionType which is 'send/sendAction' this is the actionType your reducer will receive, and the async part which receives two parameters is the payload generator.

const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {
  const data = await axios.post('/api', object);
  data.reduxRequestId = thunkAPI.requestId;
  return data;
}

The function createAsyncThunk as it is returns two parameters, one is the actionType and the second one is the Payload exactly those which you need to execute a reducer function.

now if you want to use your method should be something like this.

dispatch(action(formValuesFromLocalState, APIInstance));

the arguments or parameters you pass to that function in this case (formValuesFromLocalState and APIInstance) will pass to the async function so they will be something like this

const action = createAsyncThunk('send/sendAction', async (form = formValuesFromLocalState, thunkAPI = APIInstance) 

with those parameters the way your method will execute or you may want to do it should be something like this.

const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {
  const object = /some specific way you want to morph the form values/
  const data = await axios.post('/api', object);
  data.reduxRequestId = thunkAPI.requestId; 
  return data;  (this is the actual data which will be returned as a payload).
}

in the documentation they put a better example

They execute the function this way:

dispatch(fetchUserById(123))

and the actual function is:

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

so, the function only receives in this case userId, thunkAPI is not used.

'users/fetchByIdStatus'

is the actionType which will be dispatched.

const response = await userAPI.fetchById(userId)
        return response.data

and the API call is an asynchronous code, and the return statement return response.data is the actual payload.

so in the end, the dispatch function may look something like this:

dispatch({type:'users/fetchByIdStatus', payload:(whatever response.data has)});

hope this explanation is understandable, and excuse me for my bad english.