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

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

苏南大叔:redux教程,如何理解react-redux中的Provider与store? - react-redux-provider-store
redux教程,如何理解react-redux中的Provider与store?(图5-1)

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

基础阅读项目

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

本文还基于如下几篇文章,推荐阅读:

苏南大叔:redux教程,如何理解react-redux中的Provider与store? - 运行结果
redux教程,如何理解react-redux中的Provider与store?(图5-2)

基本代码

定义组件,只涉及到数据的读取:

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

苏南大叔:redux教程,如何理解react-redux中的Provider与store? - redux-code-01
redux教程,如何理解react-redux中的Provider与store?(图5-3)

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

苏南大叔:redux教程,如何理解react-redux中的Provider与store? - redux-code-02
redux教程,如何理解react-redux中的Provider与store?(图5-4)

Provider传递store给组件

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

苏南大叔:redux教程,如何理解react-redux中的Provider与store? - redux-code-03
redux教程,如何理解react-redux中的Provider与store?(图5-5)

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

结束语

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

助理微信

微信打赏码

微信公众号

微信小程序

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

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

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

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