nytimes / redux-taxi

🚕 Component-driven asynchronous SSR in isomorphic Redux apps
Other
71 stars 8 forks source link

Workaround to use it with Axios return dispatch method #13

Open kandarppatel opened 6 years ago

kandarppatel commented 6 years ago

Example Action :

export function fetchCategories() {
  return function(dispatch) {
    return axios.get(`${API_URL}/blog/categories`)
    .then(response => {
      dispatch({
        type: FETCH_CATEGORIES,
        payload: response.data
      });
      cookie.save('cart', response.data.cart, { path: '/' });
      dispatch( checkoutAction.getCartQuantity() );
      dispatch( checkoutAction.getCart(callback) );
      dispatch( { type: AUTHENTICATE_CUSTOMER, payload: customerToken } );
    })
    .catch((error) => {
      console.log(error);
    })
  }
}

Above action returns function in ReduxTaxiMiddleware action. I have tried using provided middleware and other middle-wares like redux-thunk and redux-promise.

It will work fine with if we use below format but we need to do additional work upon receiving the response so i hope some workarounds available to accomplish this as its very common practice to use with react/redux/axios.

export function fetchCategories() {
  const request = axios.get(`${API_URL}/blog/categories`);
  return {
    type: FETCH_CATEGORIES,
    payload: request
  };
}

I have also tried to update ReduxTaxiMiddleware.js, its collecting promise but not getting results.

if(typeof action === 'function') {
  promise = action(dispatch, getState);
}
tizmagik commented 6 years ago

Are you able to put together a small reproduction case in codesandbox.io ? It would help me understand the problem better. Thanks!

kandarppatel commented 6 years ago

Thanks for your reply. It will take lot of time setup sample code for codesandbox. Can you please try to understand above details and help us find the work around.

Basically its working fine with the action method defined by redux-taxi but as we need to heavily rely on callback functionality so have to use latest method provide by axios which returns dispatch.

Redux Taxi is collecting payload from redux action if it has returned exact type and payload but to do if it will return dispatch function instead of action type and payload. I hope you will understand it better now. Thanks.

iamyash09 commented 5 years ago

@kandarppatel did you get any solution for this? I am facing the same issue now.

kandarppatel commented 5 years ago

Still no proper solution with redux-taxi.