为什么在 Redux 中使用中间件进行异步操作？

为什么我们需要 Redux 中的异步流中间件？

乍一看，Redux 不支持异步数据流，因为它指定了“Redux 存储仅支持同步数据流。”然而，事实并非如此。

在给定的示例中，容器组件当然可以调用异步 API 并随后分派必要的操作。事实上，这种方法可以正常工作，单击按钮时字段的更新就证明了这一点。

这个策略有什么问题吗？

主要关注点出现在较大的应用程序中，其中许多组件可能执行相同的操作，或者可能需要合并诸如去抖之类的功能。此外，对于自动递增 ID 之类的任务，保留动作创建者附近的本地状态可能是有益的。

从维护的角度来看，它简化了将动作创建者分成不同功能的问题，从而简化了动作创建者的开发和维护代码库。

虽然像 Redux Thunk 或 Redux Promise 这样的中间件通过语法糖提供了代码简化，但对于

没有中间件：

在没有中间件的情况下，action 创建者可以直接执行异步操作，如下所示：

function loadData(dispatch, userId) {
  fetch(`http://data.com/${userId}`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
    );
}

// in component
componentWillMount() {
  loadData(this.props.dispatch, this.props.userId); // pass dispatch as argument for async action creator
}

用 Thunk中间件：

Redux Thunk 提供了更简洁的语法来分派异步操作：

function loadData(userId) {
  return dispatch =>
    fetch(`http://data.com/${userId}`)
      .then(res => res.json())
      .then(
        data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
        err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
      );
}

// in component
componentWillMount() {
  this.props.dispatch(loadData(this.props.userId)); // dispatch as usual
}

中间件的好处：

主要使用 Redux Thunk 等中间件的优点在于将组件与操作创建者实现细节解耦。组件仍然不知道动作创建者是同步还是异步，以及它是否与 Redux 状态或其他动作创建者交互。

中间件的替代品：

Redux Thunk 是不是 Redux 应用程序中处理异步请求的唯一方法。另一个引人注目的替代方案是 Redux Saga，它可以定义长期运行的“saga”，这些“saga”对传入操作进行操作，在生成进一步操作之前转换或执行请求。

以上是为什么在 Redux 中使用中间件进行异步操作？的详细内容。更多信息请关注PHP中文网其他相关文章！