在这篇文章的基础上,https://blog.csdn.net/weixin_41987016/article/details/143257435?spm=1001.2014.3001.5501
继续优化, 借助Provider批量的给整个应用里面的所有的容器组件的添加store
- 原来的,src/index.js
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
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
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
import React, {Component} from 'react';
import Count from "./containers/Count";
class App extends Component {
render() {
return (
<div>
<Count/>
</div>
);
}
}
export default App;