在Axios中可以观察到Redux的反应

时间:2019-10-24 16:22:18

标签: reactjs redux redux-observable

早安,

im试图通过史诗更新我的数据库,并随后将响应分派回更新商店。 但是,虽然操作最终将分派到我的商店,但有效载荷是未定义的。我知道updateArticle的获取速度不够快是有问题的。我如何让它等待updateArticle返回响应,然后再分派到商店?

我的史诗:

  action$.pipe(
flowing left-to-right, calling each function with the output of the last one.
    filter(action => action.type === "ADD_ARTICLE_EPIC"), 
    switchMap(
      action =>
        from(updateArticle(action.payload)).pipe(
          map(action => {
            console.log(action);
            return { type: "ADD_ARTICLE", payload: action.payload };
          })
        )
      // return { type: "ADD_ARTICLE", payload: action.payload };
    )
  );

我的axios:

export const updateArticle = async article => {
  const response = await axios.post(`/articles/updateArticle`, article);
  return response.data;
};

1 个答案:

答案 0 :(得分:2)

以下是使用redux和redux-thunk进行此操作的示例。

API.conversation.sendMessage在后台执行axios发布请求。

  export const sendNewMessage = message => {
  return async dispatch => {
    try {
      const { data } = await API.conversation.sendNewMessage(message);
      dispatch({
        type: SEND_NEW_MESSAGE_OK,
        payload: data,
      });
    } catch (error) {
      dispatch({
        type: SEND_NEW_MESSAGE_ERROR,
        payload: error,
      });
    }
  };
};