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

Question

我已经使用 redux 大约两个月了，最近才开始探索处理异步行为（例如获取数据）的不同方法。它出现在 documentation and from discussions on GitHub that the standard way of doing this by using the thunk middleware 中，这是一个非常简单的概念，但是我不确定我是否理解在可以使用简单的独立函数时将执行异步状态机的责任交给 redux 中间件的好处。

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

Async Action Creator 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 组件中可能有一个按钮，如下所示。

正在调度 fetchPosts

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

单击此按钮时调用异步操作创建者 requestPosts，其中 return 是一个接受 dispatch 并负责的函数用于执行任何可能有副作用的异步代码，并分派可能导致的真实操作。

没有 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 函数并将调度作为参数传递。

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

结论

根据并排的两个示例，我看不出使用 thunk 中间件的异步动作创建器如何给我带来任何好处，它需要在设置中间件时增加复杂性并引入两种动作创建器 (1) pure return 要分派的单个动作的函数 (2) 不纯函数，这些函数会将动作和可能的其他 thunk 反馈到调度程序中。我觉得我在这里遗漏了一些东西，它可以解释在 redux 中调度除不可变操作之外的东西的好处。

Answer 1

这是一个很好的领域。我想说异步动作创建者并不是特别令人满意是一种普遍的看法，但是有充分的理由更喜欢 Redux Thunk 而不是完全手动的方法。但这只是众多可能方法中的一种。参见。

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

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

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

javascript

asynchronous

reactjs

redux

redux-thunk