使用Redux管理React组件状态实战教程-优快云博客

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)