CODEWITHSUNDEEP
reactjsreduxredux-observable
Ask the cat
Ask the cat

Reputation: 47

Redux observable with axios in react

Good Day,

im trying to update my database through the epic and subsequently dispatching the response back to update the store. However, while the action eventually dispatches to my store, the payload is undefined. I understand it is some problem with updateArticle not fetching fast enough. How do i allow it to wait for updateArticle to return the response before dispatching to the store?

My epic:

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

My axios:

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

Upvotes: 0

Views: 355

Answers (1)

Maximiliano Poggio
Maximiliano Poggio

Reputation: 1182

Here is an example for doing that using redux and redux-thunk.

API.conversation.sendMessage is doing an axios post request behind the scenes.

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

Upvotes: 2

Related Questions