尚硅谷-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 分钟前
高压变频器故障代码解析F67 F68
运维·经验分享·笔记·分布式·深度学习
初级炼丹师(爱说实话版)1 小时前
MySql速成笔记5(多表关系)
笔记
iconball2 小时前
个人用云计算学习笔记 --19 (MariaDB服务器)
linux·运维·笔记·学习·云计算
岑梓铭2 小时前
《考研408数据结构》第四章(串和串的算法)复习笔记
数据结构·笔记·考研·算法
冬夜戏雪3 小时前
记录下C盘清理步骤(有效)
经验分享·笔记
我登哥MVP3 小时前
Apache Tomcat 详解
java·笔记·tomcat
泽虞4 小时前
《Qt应用开发》笔记
linux·开发语言·c++·笔记·qt
报错小能手4 小时前
linux学习笔记(21)线程同步——互斥锁
linux·笔记·学习
明明真系叻5 小时前
《量子计算》学习笔记:量子计算的基本定义(续)
笔记·学习·量子计算
不会调制解调的猫7 小时前
笔记 | 内网服务器通过wifi穿透,设置流量走向
运维·服务器·笔记