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

Question

在主要使用钩子设计的 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>
}

Answer 1

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

Answer 2

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

问题是：你失去了什么？

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

通过将数据提取之类的东西拉到您的组件中，您将失去这种好处。您现在拥有需要了解数据层和商店内部的组件，而不是做它的事情的商店和做他们的事情的组件（在应该按给定顺序分派许多不同操作的情况下）。

逻辑移回到您的组件中，您会变得一团糟。

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

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

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

Is Redux Thunk Middleware really needed in a React Hooks based App?

reactjs

redux

redux-thunk

react-hooks