在一个主要使用钩子设计的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>
}
型
3条答案
按热度按时间ocebsuys1#
当然,你也可以不使用thunk,异步获取当前状态会有点麻烦(在thunk中你可以直接调用
getState
),但这是可行的。问题是:你失去了什么?
你失去的主要是一个概念。Redux本身的优势在于它在组件之外创建了一个数据流。你的组件只是调度一个事件,然后组件之外的逻辑发生。你的组件稍后会获得一个新的状态并显示它。
如果将数据获取之类的东西拉到组件中,你就失去了这个好处。现在的组件需要了解数据层和存储内部(在许多不同的操作应该以给定的顺序调度的情况下),而不是一个存储做它自己的事情,组件做它们自己的事情。
逻辑回到你的组件中,你会得到一个烂摊子。
如果你只是使用一个形实转换程序,那么你的组件所做的就是
dispatch(userDetailsPageDisplayed({ userId: 5 }))
,过了一段时间,它就会得到所有的数据。有点跑题:你在这里写的是一个非常过时的Redux风格。现代Redux不使用switch..case reducers,不可变的reducer逻辑或ACTION_TYPES。而且你通常不应该在组件中构建分派的动作。我建议你阅读official Redux tutorial。然后可能给予Redux Style Guide读一读,以获得更多的上下文和建议(例如,我们建议使用事件类型的操作,而不是setter样式的操作)。
svujldwt2#
实际上,redux-thunk只是处理异步任务的一种约定。你可以很容易地用函数或方法来做到这一点。回到过去,当react只有基于类的组件时,在我们的应用程序中不可能多次使用一个功能。但是这个问题通过StatefulFunction Components和Hooks得到了解决。所以,你真的不需要thunk。
jvidinwx3#
我知道这是一个老帖子,但这个问题可能会出现很多次,我想我会添加一个额外的视角。
从你的问题措辞来看,答案肯定是“不”。你不需要Thunk来进行AJAX调用,也不需要Thunk来做任何相关的数据变化和预处理。
在我看来,问题是:Thunks是否提供了任何显着的好处?我个人不这么认为。事实上,我认为它们引入了不必要的复杂性,并剥夺了React开发的优雅本质。但是,我将在这里尝试扮演魔鬼的倡导者。
Redux帮助我们在单页面应用程序中进行状态管理,如果没有Redux,使用React框架在嵌套组件中进行状态管理可能会很复杂。例如,如果你有一个子组件,它有n层深度,你需要将数据返回给父组件,你必须将数据反向传播(prop drilling)到n层,这既难看又麻烦。
通过使用一个单例对象来维护应用程序的状态,使应用程序的所有组件都可以访问,我们可以避免这种情况。
在我看来,thunks的主要好处是,我们可以将该组件的状态逻辑和获取逻辑(通常简化为Redux * 切片 *)保存在单个文件中,其全部目的是状态管理。
这样,当分派一个形实转换程序时,仍然需要编写至少两行代码。一行用于引用
useDispatch
钩子,另一行用于实际分派更新。而且,从可读性的Angular 来看,这并不比使用自定义钩子“更干净”,也不比使用自定义钩子少代码。而且,人们会争论组织代码是否有意义,以便将获取逻辑和状态管理逻辑关联起来,就像他们争论将类型定义。所以,IMO,将获取逻辑本地化到切片充其量是一个弱参数。重要的是,
createAsyncThunk
API使用起来有点笨拙。像获取状态,访问调度方法等事情感觉像是react-redux和vanilla redux库的奇怪混搭。除了,你实际上无法访问Redux库中的任何内容。而且,React库中有一些非常有用的钩子用于数据访问。而且,那么你也有义务实现“extraReducers”。redux切片/存储,redboc形实转换和extra reducers感觉有点不连贯或不连续。如果你选择写一个自定义钩子,你可以继续以一种明显是React代码的方式写代码,AJAX调用和各种React钩子之间的关系非常清楚。你可以使用react-redux库提供的钩子,这些钩子显然是为了与React组件一起使用。也就是说,如果您决定集成一个钩子,如
useMemo
或useCallback
,以优化性能,那么它自然会集成到一个钩子中,而如果您选择与Thunk相关联,那么就不那么清楚了,因为有第三方库(内容如下:另一个项目的依赖项),它们被设计用来解决这个特定的问题。而且,AJAX操作和状态管理连接到组件的方式都很容易识别。此外,自定义钩子是非常强大的工具,它也让开发人员非常有创造力。而且,我认为开发人员在学习如何掌握自定义钩子方面比编写thunks要多得多。使用Thunks
个字符
使用自定义挂钩
的字符串