回调后,Redux没有持有数据?

时间:2018-01-30 07:11:55

标签: reactjs redux react-redux

    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
        }
    }

在调用我的函数doLogin之后,它正在执行请求和callback指定并且工作正常之后请求不再保留我的数据并将其显示为未定义我在控制台中查看的位置?

1 个答案:

答案 0 :(得分:3)

我不确定你在尝试什么,但我建议另外使用redux-thunk中间件来做到这一点:

execvp

这样就可以实际引用动作分派,直到请求完成并将结果数据分派到商店。

这样你也可以处理错误:

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
   }));

此外,您可以分派更多操作,因此请指示请求的开始,如下所示:

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

请注意,操作创建者会返回承诺,因此在其他地方,您可以触发操作:

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*/))
}

如果您遵循这种方式,与redux-form合作会更容易,如果您将其用于表单,我建议您使用它。

您应该知道,在响应对象中,其数据作为流公开。这意味着,您无法两次读取数据。调用doLogin({…}).then(data => callBack()); res.json()后,响应数据将被“消耗”,并且无法再次从响应对象访问。