我已经使用 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 组件中可能会有一个按钮，如下所示。

调度 fetchPosts

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

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

结论

基于并排的两个示例，我没有看到使用 thunk 中间件的异步动作创建者如何给我买任何东西，它需要增加设置中间件的复杂性，并引入两种动作创建者 (1) 纯函数，它们返回单个要调度的动作 (2) 不纯的函数，这些函数会将动作和其他可能的 thunk 反馈到调度器中。我觉得我在这里遗漏了一些可以解释在 redux 中调度除不可变操作之外的其他内容的好处的东西。