Loader using React Redux thunk

Question

I work on a project where we use react with redux and redux-thunk (we use a middleware).

It's a 100k + line code project, so I'm not aware of everything under the hood.

I have a simple problem, when I fetch data to the server (in .Net) I have a loader to let the user know that the server is working.

I have my file in .js with action to fetch data:

// Query Count management
export function segmentCount(queryIndex) {
    return function(dispatch) {
        dispatch({ type: ActionTypes.COUNT + '_PENDING', payload: { queryIndex: queryIndex } });
        axios.post(urls.SegmentCount, [queryIndex])
            .then((response) => {
                dispatch({ type: ActionTypes.COUNT + '_FULFILLED', payload: { queryIndex: queryIndex, response: response } });
            })
            .catch((err) => {
                dispatch({ type: ActionTypes.COUNT + '_REJECTED', payload: { queryIndex: queryIndex, response: err } });
            });
    }
}
export function actionCount(queryIndex) {
    return function(dispatch) {
        dispatch({ type: ActionTypes.COUNT + '_PENDING', payload: { queryIndex: queryIndex } });
        axios.post(urls.ActionCount, [queryIndex])
            .then((response) => {
                dispatch({ type: ActionTypes.COUNT + '_FULFILLED', payload: { queryIndex: queryIndex, response: response } });
            })
            .catch((err) => {
                dispatch({ type: ActionTypes.COUNT + '_REJECTED', payload: { queryIndex: queryIndex, response: err } });
            });
    }
}

And my jsx where i call the function:

segmentCount() {
        this.props.dispatch(segmentCount(this.props.queryId));
    }
    actionCount() {
        this.props.dispatch(actionCount(this.props.actionId));
    }

The loader normally appears when we have ActionTypes_PENDING.

Everything is working fine, I added the function actionCount, It's working, but I don't have the loader, where as when using segmentCount, I have it.

I have strictly no idea where to look to solve this. If anyone know where to look on this one, I'll be very happy! Tell me if you need specific information.

Thanks in advance to the community !

Answer 1

As per my understanding segmentCount and actionCount with a different sections. So you need to use different dispatch type for it.

 dispatch({ type: ActionTypes.SegmentCOUNT + '_PENDING', payload: { queryIndex: queryIndex } });

 dispatch({ type: ActionTypes.ActionCOUNT + '_PENDING', payload: { queryIndex: queryIndex } });

Also add loader sample for more understanding.

Hope above answer resolved your issue.