redux教程,对比类组件和函数组件修改使用redux数据
发布于 作者:苏南大叔 来源:程序如此灵动~

redux
是可以独立使用的,也是可以结合react
使用的,甚至是可以结合vue
使用的。在以往的react
文章里面,都是使用useSelector
来调用redux
数据的。然而,大家是否意识到,这些例子都是函数式组件呢?本文要讨论的问题就是,在传统的react
类组件中,如何使用redux
数据呢?

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述react
的类式组件里面,如何链接redux
的数据。测试环境:create-react-app@5.0.1
,node@16.14.2
,react@18.2.0
,react-dom@18.2.0
,react-redux@8.0.5
,@reduxjs/toolkit@1.9.0
。
创建store
本文对标下面这篇文章,讲述了函数式组件如何使用useSelector
调用store
里面的数据。
定义一个store
有两种方式,本文就不采用传统被放弃的createStore()
函数了,采用更加先进的@reduxjs/toolkit
方式。(其实苏南大叔觉得被废弃的createStore()
函数更加好用)。

函数式组件调用[sunan01]
这个是最常见的使用情况,使用了useSelector()
和useDispatch()
这些hook
。代码类似如下:

类式组件调用[sunan02]
在类式组件里面,试图使用useSelector
或者useDispatch
的话,会报错类似如下:

官方给出的方案是使用的一个connect
函数去把store
转为props
,实际上生成了一个新的组件类。代码如下所示:

selector
转为props
之后,就必须受制于PureComponent
或者shouldComponentUpdate
。
整体调用代码
上面先创建一个基于redux
的store
,然后定义函数式组件sunan01
,类式组件sunan02
,最后像下面的代码一样调用。

结束语
苏南大叔的结论是:使用redux
,在类式组件里面的姿势,是非常的奇怪,还是使用函数式组件更加好一些。


