8.1 安装react-redux
npm install react-redux -s
8.2 使用react-redux
react-redux提供了两个api
Provider为后代组件提供store
connect为组件提供数据和变更方法
import React,{Component} from "react"
import {connect} from "react-redux"
const mapStateToProps = state =>{
return {
num:state
}
}
const mapDispatchToProps = {
add:()=>{
return {
type:"ADD"
}
},
minus:()=>{
return {
type:"MINUS"
}
}
}
class ReactReduxPage extends Component{
render(){
const {num,add,minus} = this.props;
return(
<div>
<h1>ReactReduxPage</h1>
<p>{num}</p>
<button onClick={add}>add</button>
<button onClick={minus}>minus</button>
</div>
)
}
}
export default connect(
mapStateToProps,//状态映射
mapDispatchToProps//派发事件映射
)(ReactReduxPage)
import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
import store from './store/'
import { Provider } from 'react-redux'
ReactDom.render(
<Provider store={store}>
<App/>
</Provider>,
document.querySelector('#root')
)
代码下载地址:https://gitee.com/JingYaBei/my-app.git