尚硅谷-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 小时前
摄像头模块在运动相机中的特殊应用
经验分享·笔记·科技
阿巴Jun4 小时前
【数学】线性代数知识点总结
笔记·线性代数·矩阵
茯苓gao4 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾4 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
DKPT5 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
ST.J5 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
Suckerbin5 小时前
LAMPSecurity: CTF5靶场渗透
笔记·安全·web安全·网络安全
小憩-6 小时前
【机器学习】吴恩达机器学习笔记
人工智能·笔记·机器学习
UQI-LIUWJ6 小时前
unsloth笔记:运行&微调 gemma
人工智能·笔记·深度学习
googleccsdn6 小时前
ESNP LAB 笔记:配置MPLS(Part4)
网络·笔记·网络协议