基于 React Hooks 的应用程序真的需要 Redux Thunk 中间件吗？

Posted 2023-02-22

【中文标题】基于 React Hooks 的应用程序真的需要 Redux Thunk 中间件吗？

【英文标题】：Is Redux Thunk Middleware really needed in a React Hooks based App?

【发布时间】：2022-01-05 06:07:58

【问题描述】：

在一个主要使用钩子设计的 React 应用程序中。我认为不需要 redux-thunk 中间件，还是我遗漏了什么？

Redux-thunk 方法

const Component = () => 
const dispatch = useDispatch()
const user = useSelector(state => state.user)

useEffect(() => 
  dispatch(getUserFromApiAndDispatch())
, []) 

return <div>user</div>

或者干脆

const Component = () => 
const dispatch = useDispatch()
const user = useSelector(state => state.user)

useEffect(() => 
  getUserFromApi().then((data) => dispatch(type: 'SET_USER'; payload: data.user)
, []) 

return <div>user</div>

【参考方案1】：

其实没有。 redux-thunk 只是处理异步任务的约定。您可以使用函数或方法轻松地做到这一点。过去，当 React 只有基于类的组件时，不可能在我们的应用程序中多次使用一个功能。但是这个问题通过 Stateful 函数组件和 Hooks 得到了解决。所以，你真的不需要 thunk。

【参考方案2】：

这取决于。当然，您可以在没有 thunk 的情况下完成所有这些操作。异步获取当前状态会有点脏（在一个 thunk 中，您可以调用 getState）但它是可行的。

问题是：你失去了什么？

而你失去的主要是一个概念。 Redux 本身的优势在于它在组件之外创建了一个数据流。 你的组件只是派发一个事件，组件之外的逻辑就会发生。您的组件稍后会获得一个新状态并显示它。

通过将数据提取之类的东西拉入您的组件，您将失去这种优势。您现在拥有的组件需要了解数据层和存储内部结构（在应按给定顺序分派许多不同操作的情况下），而不是由商店做事和组件做事。

逻辑移回您的组件中，结果一团糟。

如果你只是使用一个 thunk，那么你的组件所做的就是dispatch(userDetailsPageDisplayed( userId: 5 )) 并且在一段时间之后，它会获取所有的数据。

---

有点跑题了：你在这里写了一个非常过时的 Redux 风格。现代 Redux 不使用 switch..case 减速器、不可变减速器逻辑或 ACTION_TYPES。此外，您通常不应该在组件中构建分派的操作。 我建议您阅读official Redux tutorial。 然后也许可以阅读Redux Style Guide，以获得更多上下文和建议（例如，我们推荐事件类型的操作，而不是设置器样式的操作）。