如何在与redux,redux-thunk和axios的反应中设置post请求的回调?

时间:2017-05-10 07:36:25

标签: api reactjs redux axios redux-thunk

我尝试做异步后请求,只有在成功后才更新我的数据。

我想要的是在动作调用中使用promise类型的东西。

this.props.postAction('/event/user/44/post',data)
.then((response) =>{
  console.log("Inside callback"); 
  console.log(response);
});
export default connect({postAction})(EventFeed);

这是我的动作文件,我发布了帖子请求

export const POST_ACTION = 'POST_ACTION';

export function postAction(url,data) {
  return function(dispatch) {
      axios({
          method:'post',
          url:API_URL + url,
          headers: {'event': 55},
          data: data,
      })
    .then(response => {
      dispatch({
        type: POST_ACTION,
        payload: response.data
      });
    })
    .catch((error) => {
      console.log(error);
    })
  }
}

但我永远不会进入内部回调。

现在如何进行回调以从响应中获取数据???

2 个答案:

答案 0 :(得分:2)

首先,你应该这样做。你违反了Unidirectional dataflow背后的整个想法。使用Redux时,您的异步内容应该仅在操作创建者中处理,它会调度具有潜在数据负载的操作,商店会更新并且应用程序会重新呈现。当你伸出手去"回来"通过承诺链违反该流程。

有了这个警告说,你没有从你的thunk中回复承诺。您还应该在链接时返回您的回复。 MDN

export function postAction(url,data) {
  return function(dispatch) {
      //You need to return your promise.
      return axios({
          method:'post',
          url:API_URL + url,
          headers: {'event': 55},
          data: data,
      })
    .then(response => {
      dispatch({
        type: POST_ACTION,
        payload: response.data
      });
      return response;
    })
    .catch((error) => {
      console.log(error);
    })
  }
}

或许https://codereview.stackexchange.com/对于那些问题来说是个更好的地方。

答案 1 :(得分:0)

您好,您可以将回调函数作为参数传递给redux操作

export const createUser = (user, callBack) => {
    api.defaults.headers.common['Authorization'] = state.token.token;
    api.post("/users/create", user)
        .then(response => {
            //dispach(createUserSuccess(response.data));
            if (callBack !== undefined) {
                callBack(response.data, null);
            }
        }).catch(error => {
            error = errorManager(error);
            //dispach(createUserFailure(error));
            if (callBack !== undefined) {
                callBack(null, error);
            }
        });
}