1.创建reducer
exports.reducer=(state, action) => {
return state
}
2.创建store
import {createStore} from 'redux'
import reducer from '../reducer/index'
const store = createStore(reducer)
export default store
3.创建了两个组件ComA和ComB,在APP里引入
import React from 'react'
import store from '../src/store/'
import ComA from '../src/pages/ComA/index'
import ComB from '../src/pages/ComB/index'
import { Provider } from 'react-redux'
class APP extends React.Component {
render() {
return (
<Provider store={ store } >
<div>
<ComA />
<ComB />
</div>
<Peovider>
)
}
}
export default APP
4.使用
4.1 用provider包裹需要使用数据的组件。
4.2 在A组件内使用connect.
import React from 'react'
import {connect} from 'react-redux'
class ComA extends React.Component{
handleClick = ()=>{
console.log(this.props)
}
render() {
return (
<button onClick={this.handleClick}> + </button>
)
}
}
const mapDispatchToProps = (dispatch) => {
return {
sendAction: ()=>{
dispatch({
type: 'add_type'
})
}
}
}
// connect接受四个回调函数作为参数,后两个参数一是合并数据,一是connect配置一般不用
// connect('要接受数据的函数','要发送action的函数')(放入要加强的组件)
// A 是发送方 所以实现第二个参数
export default connect(null, mapDispatchToProps)(ComA)
import React from 'react'
import { connect } from 'react-redux'
class ComB extends React.Component{
render() {
return(
<buttton>1{this.props}</buttton>
)
}
}
const mapStateToPrpos = state => {
return state
}
// 接收方
export default connect(mapStateToPrpos)(ComB)