Non-tech founder’s guide to choosing the right software development partner Download Ebook
Home>Blog>Redux async actions. tracking loading and errors with react hooks.

Redux async actions. Tracking loading and errors with React hooks.

If you use redux and async actions, then you probably had to deal with a situation where you need to monitor the loading and error status of this action. With the advent of hooks, it became possible to conveniently transfer this logic to one block and use it everywhere.

import { useState, useCallback } from 'react';

import { useDispatch } from 'react-redux';

function useAsyncAction(action, dependeces = []) {

  const dispatch = useDispatch();

  const [loading, setLoading] = useState(false);

  const [isError, setIsError] = useState(false);

  const asyncAction = useCallback(

    (...args) => {

      async function callback() {


        try {

          const res = await dispatch(action(...args));



          return res;

        } catch (e) {



          return e;





    [action, ...dependeces],


  return [asyncAction, loading, isError];


Now you can use this hook in your functional component.

// …

  const [load, loading, isError] = useAsyncAction(() => loadActivityRequest(applicationId), [applicationId]);

// …


Discover More Reads

Real Stories & Real Success

Do you have a tech idea?

Let’s talk!

By submitting this form, you agree with JetRockets’ Privacy Policy

If you prefer email, write to us at