尚硅谷-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;
相关推荐
_落纸2 天前
三大基础无源电子元件——电阻(R)、电感(L)、电容(C)
笔记
Alice-YUE2 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
2303_Alpha2 天前
SpringBoot
笔记·学习
Hello_Embed3 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中3 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Grassto3 天前
RAG 从入门到放弃?丐版 demo 实战笔记(go+python)
笔记
Magnetic_h3 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
周周记笔记3 天前
学习笔记:第一个Python程序
笔记·学习
丑小鸭是白天鹅3 天前
Kotlin协程详细笔记之切线程和挂起函数
开发语言·笔记·kotlin
潘达斯奈基~3 天前
《大数据之路1》笔记2:数据模型
大数据·笔记