小编典典

与将常规函数用作异步操作创建者相比,在redux中使用thunk中间件有什么好处?[关闭]

reactjs

我已经使用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 ,该操作返回一个接受 分派
的函数,该函数负责执行可能有副作用的任何异步代码,并分派可能导致的实际操作。

没有简单的中间件的简单示例

尽管上面的内容是完全可以理解的,但尚不清楚为什么人们不愿意只做一些更简单的事情,例如下面的示例。

没有动作创建者的委托异步调度

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)不纯的功能,这些功能会将动作和其他杂项反馈到分派器中。我觉得我在这里缺少一些可以解释在redux中分发不可变动作以外的内容的好处。


阅读 253

收藏
2020-07-22

共1个答案

小编典典

这是很好的发展领域。我想说,异步动作创建者并不特别满意,这是一个普遍的看法,但是有充分的理由倾向于ReduxThunk而不是完全手动的方法。但这只是许多可能的方法之一。

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

2020-07-22