redux asynchronous action with await/async

Question

From the tutorial located here, I have a question regarding this section of the code:

export function fetchPosts(subreddit) {
  // Thunk middleware knows how to handle functions.
  // It passes the dispatch method as an argument to the function,
  // thus making it able to dispatch actions itself.

  return function (dispatch) {
    // First dispatch: the app state is updated to inform
    // that the API call is starting.

    dispatch(requestPosts(subreddit))

    // The function called by the thunk middleware can return a value,
    // that is passed on as the return value of the dispatch method.

    // In this case, we return a promise to wait for.
    // This is not required by thunk middleware, but it is convenient for us.

    return fetch(`https://www.reddit.com/r/${subreddit}.json`)
      .then(
        response => response.json(),
        // Do not use catch, because that will also catch
        // any errors in the dispatch and resulting render,
        // causing an loop of 'Unexpected batch number' errors.
        // https://github.com/facebook/react/issues/6895
        error => console.log('An error occured.', error)
      )
      .then(json =>
        // We can dispatch many times!
        // Here, we update the app state with the results of the API call.

        dispatch(receivePosts(subreddit, json))
      )
  }
}

Let's assume I wanted to use the async/await syntax instead of the "then" syntax, how would I get the error object if something fails?

e.g.

let response = await fetch(`https://www.reddit.com/r/${subreddit}.json`)
let json = await response.json();

I can surround these lines of code with a try/catch, but the author has a stern warning not to use catch here (refer to snippet above).

So is there a proper way to use the async/await pattern with this code?

ccraig · Accepted Answer · 2017-09-06 22:49:40Z

In the link you provided the note to avoid using catch is regarding the promise .catch statement. This is because it would catch errors in both the then blocks. Instead of just errors caused via fetch or response.json() it would also catch errors caused via dispatch(receivePosts(subreddit, json))

You should be able to use async await as you describe in your post whilst avoiding catching errors caused by dispatch. e.g.

export function fetchPosts(subreddit) {
  return async function (dispatch) {
    dispatch(requestPosts(subreddit));
    let response;
    let json;
    try {
      response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
      json = await response.json();
    }  catch(e) {
      // handle fetch or json error here e.g.
      dispatch(receivePostsError(subreddit, e.message));
    }
    if (json) {
      dispatch(receivePosts(subreddit, json));
    }
  }
}

Collectives™ on Stack Overflow

redux asynchronous action with await/async

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related