Redux-thunk 异步请求处理 onSuccess 和 onError 的最佳方法是啥？

Posted 2023-03-31

【中文标题】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”还是只使用调度动作来存储错误和成功处理。 因为在成功时我需要在我的组件中做一些事情，并且在出错时也

【参考方案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 就是这样。