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

Question

我正处于了解 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 有什么问题吗？

Answer 1

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

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

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

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

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

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