Usage of `dispatch()` about react-redux-loading-bar

[mironov]

Have you considered using the bundled middleware? You can configure your suffixes and it will show/hide the Loading Bar automatically.

Let's say you have these constants:

const GET_CLIENTS = "CLIENTS/GET/REQUEST"
const GET_CLIENTS_SUCCESS = "CLIENTS/GET/SUCCESS"
const GET_CLIENTS_FAIL = "CLIENTS/GET/FAIL"

Your code can remain untouched:

export function getClients(page = 1, count = 10) {
  return (dispatch, getState) => {
    const { auth: {oauthToken, oauthTokenSecret}} = getState();
    return dispatch({
      [CALL_API]: {
        endpoint: `/api/clients?page=${page}&count=${count}`,
        method: 'GET',
        headers: {
          'xoauthtoken': oauthToken,
          'xoauthtokensecret': oauthTokenSecret,
        },
        types: [GET_CLIENTS, GET_CLIENTS_SUCCESS, GET_CLIENTS_FAIL],
      }
    });
  }
}

Now configure the react-redux-loading-bar middleware:

const store = createStore(
  rootReducer,
  applyMiddleware(
    loadingBarMiddleware({
      promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],
    })
  )

That should make Loading Bar to show before the request and to hide it upon completion.

Please let me know if that answers your question.

[mironov]

@mfgabriel92 I'm going to close this for now. Please feel free to reopen it if you still experience the issue.