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

Posted 2023-02-22

【中文标题】使用 redux-thunk 和直接调用 dispatch() 有啥区别

【英文标题】：What is the difference between using redux-thunk and calling dispatch() directly使用 redux-thunk 和直接调用 dispatch() 有什么区别

【发布时间】：2018-05-26 14:37:22

【问题描述】：

我正处于了解 redux 状态管理的学习阶段，并且仍在尝试与令人眼花缭乱的样板代码和中间件丛林进行谈判，其中大部分我都相信是“良药”。所以我希望你能容忍我这个可能很初级的问题。

我知道redux-thunk 允许动作创建者异步进行并在随后的时间分派常规动作。例如，我可以在 actions.js 中定义一个 thunk 动作创建者：

export function startTracking() 
  return (dispatch => 
     someAsyncFunction().then(result => dispatch(
       type: types.SET_TRACKING,
       location: result
     ))
  )

然后像这样从 React 组件中调用它：

onPress=() => this.props.dispatch(actions.startTracking())

我的问题是，与简单地从异步回调内部分派操作相比，上述代码有什么优势？

import  store  from '../setupRedux'
...

export function startTracking() 
 someAsyncFunction().then(result => 
   store.dispatch(
     type: types.SET_TRACKING,
     location: result
   )
 )

我会在我的组件中调用它

onPress=() => actions.startTracking()

甚至

onPress=actions.startTracking

像我在第二个示例中所做的那样，通过导入直接访问store 有什么问题吗？

【问题讨论】：

查看 redux creator ***.com/questions/35411423/…的这个答案

【参考方案1】：

这样做并没有错。来自redux-thunk page：

如果你不确定是否需要它，你可能不需要。

redux的创造者解释使用它的好处here：

这看起来更简单，但我们不推荐这种方法。我们不喜欢它的主要原因是它迫使 store 成为单例。这使得实现服务器渲染变得非常困难。在服务器上，您会希望每个请求都有自己的存储，以便不同的用户获得不同的预加载数据。

基本上，使用 redux-thunk 会在每个 action creator 文件中保存 store 导入，并且您将能够拥有多个 store。这种方法还使您有机会编写更少的代码并避免意大利面条式代码。许多 redux 开发人员不喜欢导入 store 并手动调度，因为如果代码分离不好，它会创建循环依赖（从 reducers 文件中的 action creator 文件导入动作名称，并从 reducers 文件中导入 store动作创建者文件）。此外，直接分派这样的操作可能会破坏中间件工作流程，即：该操作可能不由中间件处理。

但老实说，如果您还没有看到它的优势，请不要使用它。如果有一天您在异步操作方面遇到问题，redux-thunk 可能就是答案。

【讨论】：

谢谢。 Dan Abramov 的解释（在另一条评论中也提出了建议）使事情变得更加清晰，特别是关于单身商店的观点。可惜它附在一个标题有点不相关的问题上。