Question

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

我的index.js中的getInitialProps是

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转换为使用异步/等待？我已经尝试过

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())

  }
}

但是'_app.js'中的主要getInitialProps不会等待。

Answer 1

它不特定于redux-thunk。 async..await是诺言的句法糖。一旦知道了它的确切工作原理，便可以将其应用于任何情况。 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处理它。

如何转换返回承诺以使用异步/等待的redux-thunk操作？

1 个答案: