javascript - 如何使用新的 js async/await 语法使用 redux-thunk 中间件异步操作

Question

我试图理解 redux 中的异步操作。读书this page我得到了以下示例:

export function fetchPosts(subreddit) {
  return (dispatch) => {
​
    dispatch(requestPosts(subreddit))
​
    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 a loop of 'Unexpected batch number' errors.
        // https://github.com/facebook/react/issues/6895
        error => console.log('An error occurred.', error)
      )
      .then(json =>
        dispatch(receivePosts(subreddit, json))
      )
  }
}

关于那个评论，吞下 react 异常是一个常见的错误，这是我试图避免的……我正在尝试在这里使用新的 javascript async/await 语法……等效代码如何与会是完全相同的行为吗？

我首先想到的是:

export function fetchPosts(subreddit) {
​
  return async (dispatch) => {

    dispatch(requestPosts(subreddit));
    try {
      const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
      const json = await response.json();
      dispatch(receivePosts(subreddit, json));
    }
    catch (error) {
      console.log('An error occurred.', error);
    }
  }
}

但我觉得这正是该评论要避免的内容。然后我想到了这段代码:

export function fetchPosts(subreddit) {
​
  return async (dispatch) => {

    dispatch(requestPosts(subreddit));

    try {
      const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
      const json = await response.json();
    }
    catch (error) {
      console.log('An error occurred.', error);
      return;
    }

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

但是在出现错误的情况下，我不确定行为是否与没有 async/await 的示例相同。我不确定是否需要将 return 放在 catch block 中。该示例返回了一个 promise ，我不确定我的代码是否仍然会发生这种情况。

搜索了一下，只找到this question但没有回应，我找到了 redux-saga使用生成器/ yield 语法的组件。我应该使用 redux-saga 而不是带有 async/await 的 redux-thunk 吗？

Answer 1

我的感觉是原来的代码其实应该是

export function fetchPosts(subreddit) {
  return (dispatch) => {
    dispatch(requestPosts(subreddit));
    return fetch(`https://www.reddit.com/r/${subreddit}.json`)
      .then(response =>
        response.json()
      )
      .then(json =>
        dispatch(receivePosts(subreddit, json))
      , error => {
        // Do not use catch, because that will also catch
        // any errors in the dispatch and resulting render,
        // causing a loop of 'Unexpected batch number' errors.
        // https://github.com/facebook/react/issues/6895
        console.log('An error occurred.', error)
      });
  }
}

错误处理程序是 替代 receivePosts(subreddit, json) 的调度，而不是 JSON 解析的替代(并且无条件地跟随调度具有可能未定义的 json 值)。

这种分支is hard to achieve with try/catch when using async/await ，所以我只保留 then 语法。如果你想重写它，你的第二次尝试是好的(相当于我更正的 then 语法)，但你需要在 try 之外声明 json block (或使用 var 而不是 const):

export function fetchPosts(subreddit) {
  return async (dispatch) => {
    dispatch(requestPosts(subreddit));
    let json;
//  ^^^^^^^^
    try {
      const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
      json = await response.json();
    } catch (error) {
      console.log('An error occurred.', error);
      return;
    }
    dispatch(receivePosts(subreddit, json));
  }
}