React tutorial Chapter 13 — provider and connect of Redux cross component communication

Time:2021-1-24

structure

  • component1

    • actions.js
    • reducer.js
    • component1.js
  • component2

    • actions.js
    • reducer.js
    • component.js
  • redux

    • tore.js
  • app.js

Component 1

action.js

export  function increment(){
    return {
        type: "+"
    }
}

export function decrement(){
    return {
        type: '-'
    }
}

reducer.js

export default (state = 0, action) => {
    switch(action.type){
        case '+':
            return state + 1;
        case '-':
            return state - 1;
        default:
            return state;
    }
}

component.js

import React, {Component} from 'react'
import {connect} from 'react-redux'
import * as Actions from './actions'

import Component2 from '../cp2/cp2'
class Component1 extends Component{
    increment = () => {
        console.log(this.props)
        this.props.increment();
    }
    
    render(){
        return (
            <div>
                <h3>component-cp1-{this.props.cp1}</h3>
                <input type="button" value="increment" onClick={this.increment}/>
                <Component2 />
            </div>
        )
    }
}

const mapStateToProps = (store) => {
    return {
        cp1: store.cp1
    }
}

export default connect(mapStateToProps, Actions)(Component1)

Component 2

action.js

export  function increment(){
    return {
        type: "+"
    }
}

export function decrement(){
    return {
        type: '-'
    }
}

reducer.js

export default (state = 0, action) => {
    switch(action.type){
        case '+':
            return state + 1;
        case '-':
            return state - 1;
        default:
            return state;
    }
}

component.js

import React, {Component} from 'react'
import {connect} from 'react-redux'
import * as Actions from './actions'

class Component2 extends Component{
    render(){
        return (
            <div>
                <h3>component-cp2-{this.props.cp2}</h3>
            </div>
        )
    }
}

const mapStateToProps = (store) => {
    return {
        cp1: store.cp1,
        cp2: store.cp2
    }
}

export default connect(mapStateToProps, Actions)(Component2)

store.js

import {createStore} from 'redux';
import { combineReducers } from 'redux';
import cp1 from '../components/cp1/reducer'
import cp2 from '../components/cp2/reducer'

const rootReducer = combineReducers({
    cp1,
    cp2
});

const store = createStore(rootReducer)

export default store;

app.js

import React from 'react'
import ReactDOM from 'react-dom'
import {Router, hashHistory} from 'react-router'
import {Provider} from 'react-redux'

import store from './redux/configStore'

import Component1 from './components/cp1/cp1'

ReactDOM.render(
    <Provider store={store}>
        <Component1/>
    </Provider>,
    document.getElementById('app')
)

Summary

  • Component usesreact-redux.connettakestateandactionAll merged intopropsZhongqu
  • connetThe first parameter is a method, and the first parameter of the method isstoreThat is, throughredux.combineReducersTo merge and get onerootReducer
  • Used in the outermost root elementreact-redux.ProviderComponent, its propertiesstoreIt’s throughredux.createStoreIt came outstore
  • When passedpropscallactionsWhen,reduxIt’s called implicitlystore.dispathInstead of calling it manually.
  • stayreducerThe value returned in themapStateToPropsInstead of calling manuallystore.getState()

Recommended Today

Cartoon, programmer and product manager

Internet crime series Internet crimes series – Preface On the first day of work, the front-end sued the county government and listed five crimes This cartoon isInternet crime series#2」 This is about the last time Wang Da Na sued the back end, the company’s product managers made various kinds of demons, abuse and exploitation, which […]