我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:redux教程,对比类组件和函数组件修改使用redux数据 - 类式组件redux
redux教程,对比类组件和函数组件修改使用redux数据(图6-1)

大家好,这里是苏南大叔的平行空间笔记本博客,这里记录苏南大叔和计算机代码的故事。本文描述react的类式组件里面,如何链接redux的数据。测试环境:create-react-app@5.0.1node@16.14.2react@18.2.0react-dom@18.2.0react-redux@8.0.5@reduxjs/toolkit@1.9.0

创建store

本文对标下面这篇文章,讲述了函数式组件如何使用useSelector调用store里面的数据。

定义一个store有两种方式,本文就不采用传统被放弃的createStore()函数了,采用更加先进的@reduxjs/toolkit方式。(其实苏南大叔觉得被废弃的createStore()函数更加好用)。

import React, { PureComponent } from 'react'
import { connect, useSelector, useDispatch, Provider } from 'react-redux'
import { configureStore, createSlice } from '@reduxjs/toolkit';
const myslice = createSlice({
    name: 'myslice',
    initialState: {
        value: 0
    },
    reducers: {
        setValue: (state, action) => {
            state.value = action.payload;
        },
    },
});
const myreducer = myslice.reducer;
const { setValue } = myslice.actions;
const mystore = configureStore({
    reducer: { sunan: myreducer }
});
// mystore.subscribe(() => console.log(mystore.getState()))

苏南大叔:redux教程,对比类组件和函数组件修改使用redux数据 - 第一步创建store
redux教程,对比类组件和函数组件修改使用redux数据(图6-2)

函数式组件调用[sunan01]

这个是最常见的使用情况,使用了useSelector()useDispatch()这些hook。代码类似如下:

function Sunan01() {
    const count = useSelector((state) => state.sunan.value);
    const dispatch = useDispatch();
    return (
        <div>
            <span>sunan函数组件调用:[ {count} ]</span>&nbsp;
            <button onClick={() => dispatch(setValue(count + 1))}> sunan:加壹 </button>
        </div>
    );
}

苏南大叔:redux教程,对比类组件和函数组件修改使用redux数据 - 函数式组件
redux教程,对比类组件和函数组件修改使用redux数据(图6-3)

类式组件调用[sunan02]

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

React Hook "useSelector" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks
React Hook "useDispatch" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

苏南大叔:redux教程,对比类组件和函数组件修改使用redux数据 - 类式组件报错
redux教程,对比类组件和函数组件修改使用redux数据(图6-4)

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

class Sunan02_ extends PureComponent {
    render() {
        const count = this.props.sunan.value;
        const { dispatch } = this.props;
        return (
            <div>
                <span>sunan类式组件调用:[ {count} ]</span>&nbsp;
                <button onClick={() => dispatch(setValue(count + 1))}> sunan:加壹 </button>
            </div>
        )
    }
}
const Sunan02 = connect(state => {
    //redux的state和action转为react中props
    return {
        sunan: state.sunan
    }
})(Sunan02_);

苏南大叔:redux教程,对比类组件和函数组件修改使用redux数据 - 类式组件
redux教程,对比类组件和函数组件修改使用redux数据(图6-5)

selector转为props之后,就必须受制于PureComponent或者shouldComponentUpdate

整体调用代码

上面先创建一个基于reduxstore,然后定义函数式组件sunan01,类式组件sunan02,最后像下面的代码一样调用。

export default () => {
    return (
        <div>
            <Provider store={mystore}>
                <Sunan01 />
                <Sunan02 />
            </Provider>
        </div>
    );
};;

苏南大叔:redux教程,对比类组件和函数组件修改使用redux数据 - 运行结果
redux教程,对比类组件和函数组件修改使用redux数据(图6-6)

结束语

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react    redux