尚硅谷-react教程-求和案例-优化2-Provider组件的使用-笔记

在这篇文章的基础上,https://blog.csdn.net/weixin_41987016/article/details/143257435?spm=1001.2014.3001.5501

继续优化, 借助Provider批量的给整个应用里面的所有的容器组件的添加store

  • 原来的,src/index.js
javascript 复制代码
import React from "react";
import ReactDOM from 'react-dom'
import App from './App'
 
import store from './redux/store'
 
ReactDOM.render(<App/>,document.getElementById('root'))
// 监测edux中状态的改变,如redux的状态发生了改变,那么重新渲染App组件
store.subscribe(()=>{
    ReactDOM.render(<App/>,document.getElementById('root'))
})
  • 优化后的,src/index.js
javascript 复制代码
import React from "react";
import ReactDOM from 'react-dom'
import App from './App'

import store from './redux/store'
import {Provider} from 'react-redux'

ReactDOM.render(
    // 借助Provider批量的给整个应用里面的所有的容器组件的添加store
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
)

/* 删除这段代码,改用Provider
// 监测edux中状态的改变,如redux的状态发生了改变,那么重新渲染App组件
// ReactDOM.render(<App/>,document.getElementById('root'))
// store.subscribe(()=>{
//     ReactDOM.render(<App/>,document.getElementById('root'))
// })
*/
  • 原来的,src/App.jsx
javascript 复制代码
import React, {Component} from 'react';
import Count from "./containers/Count";
// 引入store
import store from "./redux/store";
class App extends Component {
    render() {
        return (
            <div>
                {/*给容器组件传递store*/}
                <Count store={store}/>
            </div>
        );
    }
}
 
export default App;
  • 优化后的,src/App.jsx
javascript 复制代码
import React, {Component} from 'react';
import Count from "./containers/Count";

class App extends Component {
    render() {
        return (
            <div>
                <Count/>
            </div>
        );
    }
}

export default App;
相关推荐
崎岖Qiu1 小时前
【设计模式笔记06】:单一职责原则
java·笔记·设计模式·单一职责原则
im_AMBER2 小时前
数据结构 09 二叉树作业
数据结构·笔记·学习
www.024 小时前
linux服务器升级显卡驱动(笔记)
linux·运维·服务器·笔记·ubuntu·服务器环境
せいしゅん青春之我5 小时前
【JavaEE初阶】TCP核心机制10——异常情况的处理
java·网络·笔记·网络协议·tcp/ip·java-ee
wdfk_prog5 小时前
[Linux]学习笔记系列 -- [kernel][time]hrtimer
linux·笔记·学习
摇滚侠5 小时前
Spring Boot3零基础教程,把 Java 程序打包为 Linux 可执行文件,笔记91
java·linux·笔记
四谎真好看6 小时前
Java 黑马程序员学习笔记(进阶篇21)
java·开发语言·笔记·学习·学习笔记
立志成为大牛的小牛6 小时前
数据结构——三十三、Dijkstra算法(王道408)
数据结构·笔记·学习·考研·算法·图论
何故染尘優6 小时前
docker学习笔记,从入门开始!
笔记·学习·docker
少爷晚安。8 小时前
Java零基础学习完整笔记,基于Intellij IDEA开发工具,笔记持续更新中
java·笔记·学习