How to make a single loader reducer for whole application, React

Question

I have an application in which I have multiple components as well as actions and reducers for each component. I am using redux-pack for promise handling as well.

So here is the situation, I just want to use a single reducer for my whole application which handles my page-loader. That means, whenever an API call start, the loader should show and it should hide when the API ends. I don't want to write a separate action for this.

Please help me with your suggestions. Thanks in advance.

Did you find a the optimal method? I'm also looking for that — denno, Sep 09 '19 at 12:21
@Abinthaha: Can you please share the solution which you have find? — Vimal Patel, Jun 01 '20 at 13:50
Hi @VimalPatel, the solution is a direct one. I have a loader reducer and I dispatch show event when the API call starts and dispatch stop event when API is completed. The loader is called in the root level, whose state will change based on the values from the reducer. Please do let me know if you have further doubts — Abin Thaha, Jun 02 '20 at 06:11
@Abinthaha thanks for the infomation, how to identify if the dispatch action is an API call, I guess we need to implement a custom middleware to do so.Do you have some sample code related to this? I am looking for a generic solution — Vimal Patel, Jun 03 '20 at 11:38
I am using the axios for handling the API's. With axios, we can configure the API calls like https://github.com/axios/axios#axiosconfig. And from there, am dispatching the actions — Abin Thaha, Jun 09 '20 at 11:23

GAJESH PANIGRAHI · Answer 1 · 2018-05-26T16:35:46.693

, I don't have the proper idea redux-pack but I have achieved this using react-redux. There is library react-loading-overlay library you can use it or create a new loading-overlay own.

https://github.com/derrickpelletier/react-loading-overlay Link of the library if you want.

Now coming to the code:-

I have created a global state in redux named as loadingState

//this is my action.
export const ENABLE_OR_DISABLE_LOADING = 'ENABLE_OR_DISABLE_LOADING';

export function enableOrDisableLoading (value = true, msg='Loading your content') {
    return {
        type: ENABLE_OR_DISABLE_LOADING,
        payload: {isLoading: value, msg: msg}
    };
}

//this is my reducer.
export function loading(state={isLoading: false, msg: 'Please wait...'}, action) {
    switch (action.type) {
        case ENABLE_OR_DISABLE_LOADING:
            return action.payload;
        default:
            return state;
    }
}

Add this reducer to your store.


My HOC is like this.

import LoadingOverlayWrapper from 'react-loading-overlay';


class AdminImpl extends React.Component {
  return (
            <LoadingOverlayWrapper
                active={this.props.isLoading}
                spinner
                zIndex={1000}
                className="height100"
                text={this.props.msg}
            >
             <SideBar/>
             {this.props.child}
            </LoadingOverlayWrapper>
        );
}

const mapStateToProps = (state) => {
    return state.loading;
};

export const Admin = connect(mapStateToProps)(AdminImpl);



Now dispatch action from anywhere from your app.

//start Loading state
store.dispatch(enableOrDisableLoading(true, 'Your loading msg'));

//start Loading state
store.dispatch(enableOrDisableLoading(false));

Thanks, but I am looking for a more optimum method. – Abin Thaha May 29 '18 at 09:18 — Abin Thaha, May 29 '18 at 09:18

How to make a single loader reducer for whole application, React

1 Answers1