Redux isn't holding the data after callback fucntion?

Question

    import axios from 'axios';
    export const DO_LOGIN = 'do_login'; 
    export function doLogin(values, callback){
        console.log(values);
        const request = axios.post(`http://localhost:80/auth/signIn`, values)
        return{
            type: DO_LOGIN,
            payload: request
        }
    }

after calling my function doLogin it is executing the request and callback as specified and working good after that the request isn't holding my data anymore and showing it as undefined where I look at in my console?

`axios.post` is async will return immediately and return a promise — Ali Faris, Jan 30 '18 at 07:16
didn't get you i am getting data but is not assigning to the payload and showing as undefined — hruday kumar reddy, Jan 30 '18 at 07:18

philipp · Accepted Answer · 2018-01-31T20:56:45.660

I am unsure what you are trying, but I would recommend to additionally use redux-thunk middleware, to do that:

const doLogin = values => dispatch => axios.post(…)
  //not sure if one needs that for axios,
  //but for fetch that is required
  .then(res => res.json())
  .then(json => dispatch({
    type: DO_LOGIN,
    payload: json
   }));

That way the action dispatch is actually refered until the request is finished and the resulting data is dispatched to the store.

That way you also handle errors like so:

 const doLogin = values => dispatch => … //as above
   //…
   .catch(error => dispatch({
     type: DO_LOGIN_ERROR,
     error: true,
     payload: error
    }))

Additionally you can dispatch more actions so indicate the start of the request like so:

const doLogin = values => dispatch => {
  dispatch({
    type: DO_LOGIN_START
  });

  return axios.post(…)
    .then(res => res.json())
    .then(json => dispatch({
       type: DO_LOGIN_SUCCESS,
       payload: json
     }))
    .catch(err => dispatch(/*as above*/))
}

Please note that the action creator returns the promise, so in other places, where you trigger the action you can do:

doLogin({…}).then(data => callBack());

If you follow that way, it is much easier to in cooperate with redux-form, if you are using that for your forms, what I would recommend to use, too.

You should be aware, that the within the response object, its data is exposed as stream. That means, you cannot read the data twice. Once res.json() or res.body() is called, the data of the response is »consumed« and cannot be accessed from the response object again.

i know how to dispatch the data but the thing is it should also call a callBack function before returning any data to the store — hruday kumar reddy, Jan 30 '18 at 07:25

Redux isn't holding the data after callback fucntion?

1 Answers1