React tutorial Chapter 12 – combine reducers

Time:2021-1-25

structure

  • component1

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

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

    • store.js

Component 1

action.js

export default {
    increment(){
        return {
            type: "+"
        }
    },
    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 Actions from './actions'
import Reducer from './reducer'

import store from '../../redux/configStore'

import Component2 from '../cp2/cp2'

export default class Component1 extends Component{
    constructor(props){
        super(props);
        this.state = {count: 0}
    }
    increment = () => {
        store.dispatch(Actions.increment());
        this.setState({
            count: store.getState().cp1
        })
    }
    
    render(){
        return (
            <div>
                <h3>component-cp1-{store.getState().cp1}</h3>
                <input type="button" value="increment" onClick={this.increment}/>
                <Component2 />
            </div>
        )
    }
}

Component 2

action.js

export default {
    increment(){
        return {
            type: "+"
        }
    },
    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 Actions from './actions'
import Reducer from './reducer'

import store from '../../redux/configStore'

export default class Component2 extends Component{
    increment = () => {
        store.dispatch(Actions.increment());
        this.setState({
            count: store.getState().cp1
        })
    }
    
    render(){
        return (
            <div>
                <h3>component-cp2-{store.getState().cp2}</h3>
            </div>
        )
    }
}

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;

Summary

By calling togetherstoreCommunication between the two components has been implemented

  • Between multiple components, each component has a separateactionsandreducer
  • Communication between multiple componentsreduceradoptredux.combineReducersTo merge and get onerootReducerAnd finallycreateStoreTo do itstoreCreate a build for.
  • Through the view layerstore.getState()What we got wasrootReducerObject after{cp1: 0, cp2: 0}
  • store.dispathIt will change at the same timerootReducerThe attributes insidecp1andcp2Because it triggeredreducerAnd twoaction.typeIt’s all the same, so it’s modified at the same time
  • If you want to modify it separatelyrootReducer, you need to change different componentsaction.type
  • in order toaction.typeCan unify the management, may derive one more layerconstantsThis layer will be used in later cases