尚硅谷-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;
相关推荐
饕餮争锋3 小时前
设计模式笔记_创建型_建造者模式
笔记·设计模式·建造者模式
萝卜青今天也要开心3 小时前
2025年上半年软件设计师考后分享
笔记·学习
吃货界的硬件攻城狮3 小时前
【STM32 学习笔记】SPI通信协议
笔记·stm32·学习
蓝染yy4 小时前
Apache
笔记
lxiaoj1115 小时前
Python文件操作笔记
笔记·python
半导体守望者5 小时前
ADVANTEST R4131 SPECTRUM ANALYZER 光谱分析仪
经验分享·笔记·功能测试·自动化·制造
啊我不会诶6 小时前
倍增法和ST算法 个人学习笔记&代码
笔记·学习·算法
逼子格7 小时前
振荡电路Multisim电路仿真实验汇总——硬件工程师笔记
笔记·嵌入式硬件·硬件工程·硬件工程师·硬件工程师真题·multisim电路仿真·震荡电流
一条破秋裤7 小时前
一份多光谱数据分析
笔记·数据挖掘·数据分析
zstar-_7 小时前
【算法笔记】6.LeetCode-Hot100-链表专项
笔记·算法·leetcode