在redux中使用thunk中间件比使用常规函数作为异步操作创建者有什么好处

What are the benefits of using thunk middleware in redux over using regular functions as async action creators?

本文关键字:创建者 异步操作 什么 常规 redux thunk 中间件 函数      更新时间:2023-09-26

我已经使用redux大约两个月了,最近才开始探索处理异步行为(如获取数据)的不同方法。从文档和GitHub上的讨论中可以看出,使用thunk中间件是实现这一目标的标准方法,这是一个非常简单的概念,但我不确定我是否理解在可以使用简单的独立函数时,将执行异步状态机的责任交给redux中间件的好处。

使用thunk中间件的传统Redux方法

异步操作创建者fetchPosts

function fetchPosts(reddit) {
  return dispatch => {
    dispatch(requestPosts(reddit))
    return fetch(`http://www.reddit.com/r/${reddit}.json`)
      .then(response => response.json())
      .then(json => dispatch(receivePosts(reddit, json)))
  }
}

然后,也许在ReactJS组件中,可以有一个按钮,比如下面的按钮。

调度fetchPost

<button onClick={() => this.props.dispatch(fetchPosts(this.props.reddit))} />

单击此按钮时会调用异步操作创建者requestPosts,后者返回一个接受调度的函数,负责执行任何可能产生副作用的异步代码,并调度可能产生的真实操作。

没有thunk中间件的稍微简单的示例

虽然上面的内容是完全可以理解的,但不清楚为什么人们不喜欢做一些稍微简单一点的事情,比如下面的例子。

没有操作创建者的委派异步调度

function fetchPosts(dispatch, reddit) {
  dispatch(requestPosts(reddit))
  return fetch(`http://www.reddit.com/r/${reddit}.json`)
    .then(response => response.json())
    .then(json => dispatch(receivePosts(reddit, json)))
}

调用fetchPosts函数并将dispatch作为参数传递

<button onClick={() => fetchPosts(this.props.dispatch, this.props.reddit)} />

结论

基于这两个并排的例子,我看不出使用thunk中间件的异步操作创建者是如何为我购买任何东西的,它需要在设置中间件时增加复杂性,并引入了两种类型的操作创建者(1)返回要调度的单个操作的纯函数(2)将操作和其他thunk反馈到调度器的不纯函数。我觉得我在这里错过了一些东西,这些东西可以解释在redux中调度不可变操作之外的东西的好处。

这是一个非常好的领域。我想说,异步动作创作者并不特别令人满意是一种普遍的看法,但有充分的理由更喜欢Redux Thunk而不是完全手动的方法。但这只是众多可能的方法之一。请参阅为什么我们需要用于Redux中异步流的中间件?。

我认为从长远来看,社区可能会选择Redux Thunk以外的东西,但它的简单性使它成为一个很好的起点。