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已实现两个组件之间的通信

  • 多个组件之间,每个组件都有单独的actionsreducer
  • 多个组件之间的reducer通过redux.combineReducers来进行合并得到一个rootReducer,最后用createStore来完成store的创建生成。
  • 在 View 层通过store.getState()得到的是rootReducer后的对象{cp1: 0, cp2: 0}
  • store.dispath会同时改变rootReducer里面的属性cp1cp2,因为触发了reducer,而且两个action.type都是一样的,所以同时修改
  • 如果想做到单独修改rootReducer,则需要变改不同组件action.type
  • 为了action.type能统一管理,可以派生出多一个层constants,后面的案例会用到这个层

相关推荐