1:使用react-redux 简化的 页面端的使用 业务的分离的分离不会变
2:减少store的引入
3:简化state的调用 和 state修改的方法的使用 类似vuex中 mapState和mapMutation
第一步 安心 npm i react-redux
第二步 引入和使用(全局配置)
在index.js中 Provider 类似 vue中 依赖注入
import React from "react";
import ReactDom from "react-dom";
import App from "./App";
import {Provider} from "react-redux";
import store from "./store"
ReactDom.render(
<Provider store={store}>
<App></App>
</Provider>,
document.getElementById("root"))
第三步使用 (rcr)
import React, { Component } from 'react'
import {connect} from "react-redux"
class Menu1 extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
第一个页面 显示数据 {this.props.num}
</div>
)
}
}
const mapStateToProps = (state) => ({
num:state.numInfo.num
})
const mapDispatchToProps = {
}
export default connect(mapStateToProps, mapDispatchToProps)(Menu1)