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

Question

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

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

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 页面：

如果您不确定是否需要它，那么您可能不需要。

redux 的创建者在这里解释了使用它的好处：

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

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

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