Join Login Create a Request

What is CreateAsyncThunk in Redux-Toolkit

|
What is CreateAsyncThunk in Redux-Toolkit

Redux toolkit is an opinionated, batteries-included toolset for efficient Redux development. I tried redux before and I didn’t like it, you can easily get lost. But the redux toolkit is easy and fast.

What is the redux toolkit?

It is an opinionated, batteries-included toolset for efficient Redux development. Here are the four features of the redux toolkit.

  • Simple - Redux toolkit comes with utilities to simplify common use cases such as a store, reducers, and immutable logic.
  • Opinionated - It comes with default ways to set up your store, and it includes commonly used redux addons built-in.
  • Powerful - You can write mutative immutable update logic and create entire slices of state automatically.
  • Effective - Redux toolkit lets you focus on the logic part of your app.

Core redux has some complications that the redux toolkit seeks to solve. Redux has the following concerns:

  • Store configuration was too complicated
  • Many packages have to  be added to do anything meaningful with redux
  • Redux needs too much boilerplate code

This post assumes you already know about the redux toolkit and are only interested in createAsyncThunk. So what is createAsyncThunk?.

What createAsyncThunk

createAsyncThunk is a function that accepts an action type and a function that returns a promise, it also generates a thunk that dispatches pending, fulfilled and rejected types based on the promise.

Example

Assume you have a jobs REST API that you want to fetch with your redux toolkit. You could right reducers for start loading, load jobs, and loadingJobsError in your createSlice function as follows.

export const jobsSlice = createSlice({
  name: "jobs",
  initialState: {
    jobsLoading: false,
    jobs: [],
    failedMessage: "",
  },
  reducers: {
    startJobsLoading: (state) => {
      state.jobsLoading = true;
    },
    loadJobs: (state, action) => {
      state.jobs = action.payload;
      state.jobsLoading = false;
    },
    loadingJobsError: (state, action) => {
      state.jobsLoading = false;
      state.failedMessage: action.payload
    },
  },
});
export const { startJobsLoading, loadingJobsError, loadJobs } = jobsSlice.actions;

Simplifying with createAsyncThunk

If you want to simplify this code, you can use the createAsyncThunk function to take care of all those reducers. Here is how you can rewrite the above code using the createAsyncThunk.

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

// First, create the thunk
const getJobs = createAsyncThunk(
  "jobs/getJobs",
  async (thunkAPI) => {
    const res = axios.get("https://remoteok.io/api");
    return res.data;
  }
);

const getJob = createAsyncThunk(
  "jobs/getJobs",
  async (id, thunkAPI) => {
    const res = axios.get(`https://remoteok.io/api/${id}`);
    return res.data;
  }
);

// Then, handle actions in your reducers:
const jobsSlice = createSlice({
  name: "jobs",
  initialState: {
    jobsLoading: false,
    jobs: [],
    failedMessage: "",
  },
  reducers: {},
  extraReducers: {
    [getJobs.pending]: (state, action) => {
      state.jobsLoading = true;
    },
    [getJobs.fulfilled]: (state, action) => {
      state.jobs.push(action.payload);
      state.jobsLoading = false;
    },
    [getJobs.rejected]: (state, action) => {
      state.jobsLoading = false;
      state.failedMessage: action.payload
    },
    [
    [getJob.fulfilled]: (action) => return action.payload
  },
});

createAsyncThunk anatomy

Note: Reducers from the createAsyncThunk are called in the extraReducers field, and NOT reducers. createAsyncThunk accepts three parameters:

  • String action type value "jobs/getJobs"
  • The payload creator callback function,
  • And the options object

type

It's a string used to index additional action types such as pending, fulfilled and rejected, the additional action types represent the lifecycle of the async callback function.

In the above example. we used jobs/getJobs type string, and it will generate the following redux action types:

  • pending: jobs/getJobs/pending
  • fulfilled: jobs/getJobs/fulfilled
  • rejected: jobs/getJobs/rejected

payLoad creator async function

This function returns a promise with the result of async login e.g an axios or fetch function. If this function encounters an error in its lifecycle, it returns a reject promise Error instance or descriptive error message.

payLoadcreator function anatomy

The payload creator function can be called with two arguments:

  • arg: a string or object value, for example, if you want to request for individual job posting, you have to pass the id or slug of that particular job in your dispatch. For example in our getJob function, we passed the id argument. Note The arguments can only be a single string, int or object value.
  • thunkAPI: this is an object that contains all the Redux thunk function parameters. It also contains:
    • dispatch
    • getState
    • requestId - auto-generated unique string ID value that identifies the request sequence.
    • signal - This is a signal object used to identify if another part of the app is requesting a cancellation. It is an AbortCOntroller.signal object
    • rejectWithValue(value, [meta]) - a function you can return in your action creator to return a reject response with defined payload and meta.
    • fulfillWithValue(value, meta) - a function that can be returned in your action creator to fulfil with a value while having the ability to add to fulfilledAction.meta.

Options object

This is an object with these optional fields:

  • condition(arg, {getState, extra}): boolean: It is a callback function you can use to skip execution of the payload creator and all action dispatches.
  • dispatchConditionRejection: if condition() returns false, by default actions will not be dispatched. Set this to true if you want to dispatch a rejected action.
  • dGenerator(): string - Used to generate a requestId for the request sequence.
  • serializeError(error: unknown) => any: This can override the miniSerializeError to define custom serialization logic.
  • getPendingMeta({ arg, requestId }, { getState, extra }): any:: This creates an object that will be merged with pendingAction.meta.

What createAsyncThunk returns

The thunk action creator function will have plain action creators for the pending, fulfilled, and rejected cases attached as nested fields. On the getJobs example above, createAsyncThunk will generate the following functions

  • getJobs.pending: an action creator that dispatches an 'jobs/getJobs/pending' action
  • getJobs.fulfilled: an action creator that dispatches an 'jobs/getJobs/fulfilled' action
  • getJobs.rejected: an action creator that dispatches an 'jobs/getJobs/rejected' action

Tags.




Recent Posts

How to use robot.txt on a Django Website
How to use robot.txt on a Django Website
How to add a robots.txt file on a Django website so that you..
Read More
Top sites for remote jobs
Top sites for remote jobs
Where to find remote jobs for software developers in 2022...
Read More
Project ideas for a software developer portfolio
Project ideas for a software developer portfolio
Projects which can strengthen your portfolio as a software d..
Read More
My case for WordPress
My case for WordPress
WordPress strengths and weaknesses. When you should use Word..
Read More