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

Posted

技术标签:

【中文标题】在 redux 中使用 thunk 中间件与使用常规函数作为异步操作创建者相比有啥好处? [关闭]【英文标题】:What are the benefits of using thunk middleware in redux over using regular functions as async action creators? [closed]在 redux 中使用 thunk 中间件与使用常规函数作为异步操作创建者相比有什么好处? [关闭] 【发布时间】:2016-04-15 06:51:24 【问题描述】:

我已经使用 redux 大约两个月了,最近才开始探索处理异步行为(例如获取数据)的不同方法。从documentation 和discussions on GitHub 看来,使用thunk middleware 执行此操作的标准方法是一个非常简单的概念,但是我不确定我是否理解承担执行异步状态的责任的好处当可以使用一个简单的独立函数时,机器会减少中间件。

使用 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,该创建者返回一个函数,该函数接受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) 纯函数返回要调度的单个动作 (2) 不纯的函数,这些函数将反馈动作和可能的其他 thunk 到调度程序。我觉得我在这里遗漏了一些东西,它可以解释在 redux 中调度不可变动作以外的东西的好处。

【问题讨论】:

Why do we need middleware for async flow in Redux?的可能重复 我同意,这是重复的。希望我能在全部输入之前找到它:( 【参考方案1】:

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

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

【讨论】:

好久不见。就个人而言,你已经解决了什么问题? Redux thunk and saga 看起来仍然不错。存在用于更简单状态管理的替代库,例如 zustand 和 hookstate。我有什么遗漏吗? @AliMertCakar 我这几年没做过太多前端开发,所以我不知道这些天人们在做什么。据我所知,Redux 仍然很受欢迎,但不确定在处理效果上是否有强烈的共识。

以上是关于在 redux 中使用 thunk 中间件与使用常规函数作为异步操作创建者相比有啥好处? [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

使用redux-thunk完成异步connect的第二个参数的对象写法。

使用 React、Jest、Redux 和 Thunk 进行无限循环测试

redux-thunk:错误:动作必须是普通对象。使用自定义中间件进行异步操作

使用 redux-thunk 和直接调用 dispatch() 有啥区别

Redux Thunk 中间件不工作

P16:Redux-thunk中间件的使用方法