如何转换返回使用 async/await 的承诺的 redux-thunk 操作？

Question

我正在尝试将 redux-thunk 连接到 Next.js，如果我的 thunk 返回一个 promise，它就可以正常工作。如何将其转换为使用 async/await？我看了这篇文章（如何异步/等待 redux-thunk 操作？）但我无法理解它。

我getInitialProps在我的 index.js 是

static  getInitialProps(props) {
    const {store, isServer} = props.ctx;
    if (!store.getState().placeholderData) {
      return store.dispatch(loadData());
    }

目前我处理加载数据的操作是

export const loadData = () => (dispatch) => {
  return isoFetch(homeES_endpoint)
    .then(res => res.json())
    .then(data => dispatch(loadDataSuccess(data)))
      .catch(err => console.error('error loading data', err.toString()));
}

我如何将 loadData 转换为使用 async/await？我试过了

export const loadData =  () => async (dispatch) => {
  try {
    const res = await isoFetch(homeES_endpoint);
    const data = await res.json();
    dispatch(loadDataSuccess(data));
  } catch(error) {
    //dispatch({ type: LOGIN_ERROR, error });
    console.error('error loading data',error.toString())

  }
}

但是getInitialProps'_app.js' 中的 main不会等待它。

Answer 1

它不是特定于 redux-thunk。async..await是 promise 的语法糖。一旦你知道它究竟是如何工作的，它就可以应用于任何情况。await是 的替代品.then(...)。try..catch是替代品catch(...)：

export const loadData = () => async (dispatch) => {
  try {
    const res = await isoFetch(homeES_endpoint);
    const data = await res.json();
    const result = await dispatch(loadDataSuccess(data));
    return result;
  } catch (err) {
    console.error('error loading data', err.toString()));
  }
}

不同之处在于它dispatch(...)是从返回的then，因此正确的翻译需要对其进行await编辑。的一个已知陷阱async..await是，如果使用return dispatch(...)返回承诺，则不会使用try..catch.