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

再次回顾一下redux的基本用法,本文仅仅是个引子,用于引出后续用于reactProvider的概念。首先,还是继续强调一下基本的redux概念。redux虽然经常伴随着react的出现而出现,但是reduxreact并非捆绑在一起的。redux也可以单独使用,也可以配合其它框架(例如vue)使用。

苏南大叔:redux教程,两种store写法查询修改方式对比【函数式组件】 - redux写法对比
redux教程,两种store写法查询修改方式对比【函数式组件】(图6-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文主要回顾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.0redux在类组件里面的使用方法,不是很好用。所以推荐函数式组件的写法。

基本概念

本文代码基于create-react-app生成的默认代码,参考文章:
https://newsn.net/say/create-react-app.html

主要的功能需求是:父组件维护一个react的状态值,可以同步个子组件中的redux的状态值。
主要的实现思路是:基于redux有两个store,也有两个同名的redux的状态值。两个reduxstore可以独立存在,内部的状态值也可以通过Provider提供给react组件使用。react组件通过useSelector访问redux状态值,也可以通过useDispatch来改变redux状态值。

苏南大叔:redux教程,两种store写法查询修改方式对比【函数式组件】 - 代码逻辑
redux教程,两种store写法查询修改方式对比【函数式组件】(图6-2)

顶部组件引用

import { Provider, useSelector, useDispatch } from 'react-redux';
import { createStore } from 'redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';
import React, { useState, useEffect } from "react";

传统redux写法【已过期】 + 子组件一

这部分的内容,可以参考文章:
https://newsn.net/say/redux.html

传统的redux写法,虽然被官方声明为“已过期”了。但是,还是可以使用的,而且比新的写法更简单容易理解。

// import { createStore } from 'redux';
const store01 = createStore((state = { sunan: { value: 0 } }, action) => {
    switch (action.type) {
        case 'sunan/setReduxValue':
            return { sunan: { value: action.value } }
        default:
            return state
    }
})
// store01.subscribe(() => console.log(store01.getState()))
// store01.dispatch({ type: 'sunan/setReduxValue',value:3 })

苏南大叔:redux教程,两种store写法查询修改方式对比【函数式组件】 - redux-code-01
redux教程,两种store写法查询修改方式对比【函数式组件】(图6-3)

react组件调用:

function Sunan01() {
    const count01 = useSelector((state) => state.sunan.value);
    const dispatch = useDispatch();
    return (
        <div>
            <span>sunan大叔说:[ {count01} ]</span>&nbsp;
            <button onClick={() => dispatch({ type: 'sunan/setReduxValue', value: (count01 + 1) }) }> sunan:加一 </button>
        </div>
    );
}

使用redux/toolkit + 子组件二

这部分的内容,可以参考文章:
https://newsn.net/say/redux-toolkit.html

这种写法,操作起来相对复杂一些。

// import { configureStore, createSlice } from '@reduxjs/toolkit';
const myslice = createSlice({
    name: 'myslice',
    initialState: {
        value: 0
    },
    reducers: {
        setReduxStateValue: (state, action) => {
            state.value = action.payload;
        },
    },
});
const myreducer = myslice.reducer;
const { setReduxStateValue } = myslice.actions;
const store02 = configureStore({
    reducer: { sunan: myreducer }
});
// store02.subscribe(() => console.log(store02.getState()))

苏南大叔:redux教程,两种store写法查询修改方式对比【函数式组件】 - redux-code-02
redux教程,两种store写法查询修改方式对比【函数式组件】(图6-4)

react函数式组件调用:

function Sunan02() {
    const count02 = useSelector((state) => state.sunan.value);
    const dispatch = useDispatch();
    return (
        <div>
            <span>sunan大叔写:[ {count02} ]</span>&nbsp;
            <button onClick={() => dispatch(setReduxStateValue(count02 + 1))}> sunan:加壹 </button>
        </div>
    );
}

苏南大叔:redux教程,两种store写法查询修改方式对比【函数式组件】 - redux-code-03
redux教程,两种store写法查询修改方式对比【函数式组件】(图6-5)

react父组件

// import React, { useState, useEffect } from "react";
const SunanComponent = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        store01.dispatch({ type: 'sunan/setReduxValue', value: count })
        store02.dispatch(setReduxStateValue(count));
    }, [count]);
    return (
        <>
            <div>
                苏南大叔&nbsp;&nbsp;说:[ {count} ]&nbsp;
                <button onClick={() => setCount(count + 1)}>{"父组件点击+1"}</button>
            </div>
            <Provider store={store01}>
                <Sunan01 />
            </Provider>
            <Provider store={store02}>
                <Sunan02 />
            </Provider>
        </>
    );
};
export default SunanComponent;

苏南大叔:redux教程,两种store写法查询修改方式对比【函数式组件】 - redux-code-04
redux教程,两种store写法查询修改方式对比【函数式组件】(图6-6)

然后在CreateReactApp之类生成的react项目里面,初始化这个父组件SunanComponent即可。把reduxstore传递给react组件的核心代码是:

<Provider store={store01}>
    <Sunan01 />
</Provider>

一共三个按钮,父组件里面的按钮可以把react状态值同步到两个子组件中,但是两个子组件各自维护自己的redux状态值。其中,同步数据的代码概念的理论基础,可以在下面这篇文章里面找到相关描述:

相关链接

结束语

更多redux经验文章,请点击下面的链接查看:

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

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

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

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