在分派时使用异步等待答案

【问题标题】：Using asynchronous await on dispatch在分派时使用异步等待
【发布时间】：2016-06-01 00:58:25
【问题描述】：

我通过使调度异步来修补 react-native 中的异步等待。如下所示，使调度异步有什么错误或问题吗？它似乎工作（除了它是一个polyfill）。如果这种方法没有任何问题，我认为它可以很好地用于 react-native。

export function fetchData(date, lng, lat){
  const {year, month} = date;
  return async(dispatch) => {
    dispatch(requestData())
    try {
      const data = await request(`http://data.police.uk/api/crimes-street/all-crime?lat=${lat}&lng=${lng}&date=${year}-${month}`)
      dispatch(recieveData(data))
    } catch (err) {
      dispatch(requestError(err))
    }
  }
}

【问题讨论】：

标签： reactjs react-native redux

【解决方案1】：

这应该很好用（假设您的中间件中有redux-thunk）。我在几个 React/Redux 应用程序中使用了类似的方法（使用 promises 而不是 async/await）。

还有redux-promise，但我发现它不够用有两个原因：没有“开始”操作，也无法设置异步操作通常需要的meta。因此，我更喜欢像您的代码那样显式地调度操作而不是承诺。

【讨论】：

【解决方案2】：

我使用这种模式：

const result = (res) => {
        if (!res.result) {
          this.setState({
            ...this.state,
            Valid: false
          });
        }
      };


AsyncFn(this.props.dispatch, field , result);



export async function AsyncFn(dispatch, field, Callback) {
  try {
    const response = await (
      request.post(url)
    );

    if (response && response.body) {
      if (response.body.result) {
        dispatch(Auth());
        dispatch(openModal());
      } else {
        Callback(response.body);
      }
    } else {
      Callback({ result: false, message: 'Not valid' });
    }
  } catch (err) {
    Callback({ result: false, message: err.message });
  }
}

【讨论】：