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里面的数据。

• https://newsn.net/say/redux-store.html

定义一个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()))

函数式组件调用[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>
    );
}

类式组件调用[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

官方给出的方案是使用的一个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_);

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

整体调用代码

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

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

结束语

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

• https://newsn.net/tag/redux/

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