[Part 2] How to use redux thunk

We need to example is loading component.
First, fixed constant in ./global/global.constant.js file (example):

export const globalConstant = {
  SPINNER_LOADING: "SPINNER_LOADING",
};

Next, We need to create an ./global/global.action.js file, Redux Thunk allows you to write action creators that return a function instead of an action.:

export const globalAction = {
  spinnerLoading(isOpen) {
    return {
      type: "SPINNER_LOADING",
      isOpen,
    };
  },
};

And create an ./global/global.reducer.js that take these actions and return a new state:

import { globalConstant } from "./global.constant";

export const GlobalReducer = (state = { loading: false }, action) => {
  switch (action.type) {
    case globalConstant.SPINNER_LOADING:
      return {
        ...state,
        loading: action.isOpen,
      };

    default:
      return state;
  }
};

How to use dispatch and selector

Import GlobalAction from ./store/global/global.action to ./App.js

import { GlobalAction } from "./store/global/global.action";

and call state from reducer:

const { loading } = useSelector((state) => state.globalReducer);

Now, handle event to show loading:

<button
   className="..."
   onClick={() => {
      dispatch(GlobalAction.spinnerLoading(true));
   }}
>
  Click Loading
</button>

Next, run appilcation:

yarn start

Result:

You can view a demo of the website we’re creating here

Blog

[Part 2] How to use redux thunk

Sirima Insorn

How to use dispatch and selector

Join Our Newsletter. No Spam, Only the good stuff.

Related