redux教程，如何理解react-redux中的Provider与store？

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

可以这么概括的来说，redux中的状态数据存储在store中，它和react中的state完全没有关系。store目前有两种写法，但是和Provider的结合只有一种写法。react-redux通过Provider把数据传递给react子组件，通过useSelector获得store中的数据。如果不涉及数据的修改的话，那么，无关action和dispatch。

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文描述苏南大叔对于redux中，provider和store的理解。测试环境：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。

基础阅读项目

本文的内容，和上一篇内容紧密相关，可以参考文章：

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

本文还基于如下几篇文章，推荐阅读：

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

基本代码

定义组件，只涉及到数据的读取：

import React from "react";
import { createStore } from 'redux';
import { Provider, useSelector } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';
function Sunan01() {
    const count01 = useSelector((state) => state.sunan.value);
    return (
        <div>
            <span>sunan大叔说：[ {count01} ]</span>
        </div>
    );
}
function Sunan02() {
    const count02 = useSelector((state) => state.sunan.value);
    return (
        <div>
            <span>sunan大叔写：[ {count02} ]</span>
        </div>
    );
}

定义store

使用两者redux的写法，定义两个store，区别就在于初始值不一样。并且，这两个store都没有定义任何action，不支持对数据的修改。

const store03 = createStore((state = { sunan: { value: 888 } }, action) => {
    switch (action.type) {
        default:
            return state
    }
})
const store04 = configureStore({
    reducer: {
        sunan: createSlice({
            name: '随便写的名字',
            initialState: {
                value: 999
            },
        }).reducer
    }
});

Provider传递store给组件

const SunanComponent = () => {
    return (
        <>
            <Provider store={store03}>
                <Sunan01 />
                <Sunan02 />
            </Provider>
            <Provider store={store04}>
                <Sunan01 />
                <Sunan02 />
            </Provider>
        </>
    );
};
export default SunanComponent;

通过运行结果可以发现：组件读取到的状态值，完全取决于包裹组件的Provider所关联的store。

结束语

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

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

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