Can't make it work with redux-thunk about react-redux-loading-bar

[mironov]

@nextofsearch It seems that you don't use redux-promise-middleware and thus can't rely on its action type names.

Do you use fetchData across the app whenever you need to fetch any data? If yes, you can simply put showLoading and hideLoading calls in it.
You can dispatch showLoading before dispatching beforeActionCreator and hideLoading before successActionCreator and failureActionCreator .

I'm going to close the issue because that is not an issue with the lib. Feel free to use the issue to discuss the usage of the lib with redux-thunk.

[mironov]

@nextofsearch I've been using redux-promise-middleware for quite a while. It's great and works out-of-the-box with react-redux-loading-bar.

[mironov]

@jamby Sorry for the late reply.
I created a branch of demo with axios. You can take a look at the diff here:
gh-pages...demo-axios

[mironov]

@nextofsearch Hi.

In order to use react-redux-loading-bar with redux-thunk you'll need to dispatch showLoading and hideLoading actions from within your actions.

Your actions should look like that:

import { showLoading, hideLoading } from 'react-redux-loading-bar'

function incrementAsync() {
  return dispatch => {
    dispatch(showLoading())
    setTimeout(() => {
      dispatch(increment());
      dispatch(hideLoading())
    }, 1000);
  };
}

[nextofsearch]

Hi @mironov

Oh, I thought redux-thunk is one of middleware using Promises middleware. I just want to avoid adding showLoading() & hideLoading() to every action. What would be your recommendation of easy-to-use middleware choice?

Thanks!

[nextofsearch]

@mironov Thank you. I will try it out.

[jamby]

@nextofsearch Did you figure out a way to get it to work with redux-thunk and redux-promise-middleware? I also do not want to call dispatch(showLoading()) and dispatch(hideLoading()) every time. I would rather any AJAX request turns it on.

[mironov]

@jamby How do you perform AJAX requests? If you use redux-promise-middleware and fetch, then react-redux-loading-bar will work out of the box. You'll need to install the loadingBarMiddleware as it is mentioned in Readme.

[jamby]

Currently using redux-thunk and then doing an axios request for posting/getting information.

For instance:

return (dispatch) => {
    axios({
      method: 'get',
      url: '/api/data',
    }).then(({ data }) => {
      dispatch(setData(data));
    }).catch((error) => {
      console.log(error.response);
    });
  };

[nextofsearch]

@jamby I haven't figured it out yet.
@mironov I am using thunk and 'isomorphic-fetch'. Is there any workaround for me as you suggested in the demo link above.

My custom fetching code is:

import fetch from 'isomorphic-fetch'

export function fetchData (url, beforeActionCreator, successActionCreator, failureActionCreator, options = {}) {

  return dispatch => {
    if(beforeActionCreator) {
      dispatch(beforeActionCreator())
    }

    return (
      fetch(url, requestOptions).
      then(checkStatus).
      then(parseJSON).
      then(json => dispatch(successActionCreator(json))).
      then(() => {
        if(typeof(successCallback) === 'function') {
           successCallback()
        }
      }).
      catch(error => {
        console.log('error', error)
        let promise = error.response.json().
                                     then(json => dispatch(failureActionCreator(json.message)))

        if(typeof(failureCallback) === 'function') {
          failureCallback(error)
        }

        return promise
      })
    )
  }

[jamby]

At first I was confused on how it works especially for chaining dispatches, but then I looked at the complex redux-promise-middleware demo and saw how they did it.

https://github.com/pburtchaell/redux-promise-middleware/tree/master/examples/complex

Thanks!

[nextofsearch]

@mironov
Thanks for the tip and it's working now.