redux教程，两种store写法查询修改方式对比【函数式组件】

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

基本概念

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

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

顶部组件引用

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 })

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()))

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>
    );
}

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;

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

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

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

• https://newsn.net/say/react-connect-html.html

相关链接

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

结束语

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

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

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