React 教程第十二篇 —— Redux 跨組件通訊入門之 combineReducers

結構

• component1

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

• component2

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

• redux

  • store.js

組件 Component1

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>
        )
    }
}

組件 component2

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;

小結

經過共同調用store已實現兩個組件之間的通訊

• 多個組件之間，每一個組件都有單獨的actions和reducer
• 多個組件之間的reducer經過redux.combineReducers來進行合併獲得一個rootReducer，最後用createStore來完成store的建立生成。
• 在 View 層經過store.getState()獲得的是rootReducer後的對象{cp1: 0, cp2: 0}
• store.dispath會同時改變rootReducer裏面的屬性cp1和cp2，由於觸發了reducer，並且兩個action.type都是同樣的，因此同時修改
• 若是想作到單獨修改rootReducer，則須要變改不一樣組件action.type
• 爲了action.type能統一管理，能夠派生出多一個層constants，後面的案例會用到這個層