Redux-thunk 异步请求处理 onSuccess 和 onError 的最佳方法是什么？答案

【问题标题】：what will be best Approach for Redux-thunk Async Request to handle onSuccess and onError?Redux-thunk 异步请求处理 onSuccess 和 onError 的最佳方法是什么？
【发布时间】：2019-08-05 08:24:24
【问题描述】：

管理 Redux-Thunk 异步请求的最佳方法应该是什么。就像我在服务器上发布一些数据一样，连接的组件将通过

检查错误

方法 1：我只是在我的动作创建者中返回新的 Promise 以使用 then 检查解决或拒绝

const update = (todoId, isDone) => (dispatch) =>
new Promise(function(resolve, reject) {
dispatch({
  type: 'SET_SAVING',
  saving: true
});
// Function is expected to return a promise
callUpdateApi(todoId, isDone).then(updatedTodo => {
  dispatch({
    type: 'SET_SAVING',
    saving: false
  });

  resolve(updatedTodo);
}).catch(error => {
  // TBD: Handle errors for Redux

  reject(error);
})
});

方法2：通过if-else条件使用dispatch来管理render方法中的错误

const update = (todoId, isDone) => (dispatch) => {
dispatch({
    type: 'SET_SAVING',
    saving: true
  });
  // Function is expected to return a promise
  callUpdateApi(todoId, isDone).then(updatedTodo => {
    dispatch({
      type: 'SET_SAVING',
      saving: false
    });
  });
  // TBD: Handle errors
}

请帮我找到最好的解决方案我应该使用动作创建者的“return Promise”还是只使用调度动作来存储错误和成功处理。因为在成功时我需要在我的组件中做一些事情，并且在出错时也

【问题讨论】：

标签： javascript reactjs redux react-redux redux-thunk

【解决方案1】：

const update = (todoId, isDone) => (dispatch) =>
new Promise(function(resolve, reject) {
dispatch({
  type: 'SET_SAVING',
  saving: true
});
// Function is expected to return a promise
callUpdateApi(todoId, isDone).then(updatedTodo => {
  dispatch({
    type: 'SET_SAVING',
    saving: false
  });

  resolve(updatedTodo);
}).catch(error => {
  // TBD: Handle errors for Redux

  reject(error);
})
});

如果您的callUpdateApi 返回一个承诺，您不必将整个操作包装在一个承诺中，只需返回callUpdateApi。至于错误处理，常见的方法是在你的 redux 状态的某处设置一个标志以及saving 标志，例如以了解何时发生错误。然后，您的组件将接收这些标志并对其进行处理

const update = (todoId, isDone) => (dispatch) => {
  dispatch({
    type: 'SET_SAVING',
    saving: true
  });

  return callUpdateToApi(todoId, isDone).then(updatedTodo => {
    dispatch({
      type: 'SET_SAVING',
      saving: false,

      // Do something with your API response
      // e.g. update your redux store via a reducer
      updatedTodo
    });
  })
  .catch(err => {
    // Handle error, for example set a error flag
    // in your redux state so your components know an error occured
     dispatch({
      type: 'SET_SAVING',
      saving: false,
      error: true
    });
  });
}

连接您的组件，以便他们可以访问error 和saving 标志，例如在您的呼叫失败时显示错误：

export default connect(
  state => ({
    error: state.module.error,
    saving: state.module.saving
  })
)(Component);

// Inside your JSX
{this.props.error && <p>An error occured</p>}

【讨论】：

实际上，我正在处理一个非常大的项目，并且为错误处理设置 reducer 会增加我的代码的复杂性，因为这只是我选择的一个示例。你能告诉我将整个动作包装在一个承诺中的缺点吗？因为它使我的工作更轻松，但我需要遵循行业标准，因为将来稳定的实施会更好。所以请建议更好的方法？

【解决方案2】：

我们使用的最佳实践是每个 thunk 动作分派 3 个动作：

动作开始
操作成功
操作失败

callUpdateApi 是一个承诺，然后像这样在你的 thunk 中返回它：

const update = (params) => (dispatch) => {
  dispatch(started())
  return callUpdateApi(params)
    .then(result => dispatch(succeeded(result)))
    .catch(error => dispatch(failed(error)))
}

在减速器内部，您可以切换 saving 标志以将其设置为 true 并将其设置为成功或失败将其设置为 false 就是这样。

【讨论】：