React 教程第十二篇 —— Redux 跨组件通信入门之 combineReducers

前端之家收集整理的这篇文章主要介绍了React 教程第十二篇 —— Redux 跨组件通信入门之 combineReducers前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

结构

  • component1

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

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

    • store.js

组件 Component1

action.js

  1. export default {
  2. increment(){
  3. return {
  4. type: "+"
  5. }
  6. },decrement(){
  7. return {
  8. type: '-'
  9. }
  10. }
  11. }

reducer.js

  1. export default (state = 0,action) => {
  2. switch(action.type){
  3. case '+':
  4. return state + 1;
  5. case '-':
  6. return state - 1;
  7. default:
  8. return state;
  9. }
  10. }

component.js

  1. import React,{Component} from 'react'
  2. import Actions from './actions'
  3. import Reducer from './reducer'
  4.  
  5. import store from '../../redux/configStore'
  6.  
  7. import Component2 from '../cp2/cp2'
  8.  
  9. export default class Component1 extends Component{
  10. constructor(props){
  11. super(props);
  12. this.state = {count: 0}
  13. }
  14. increment = () => {
  15. store.dispatch(Actions.increment());
  16. this.setState({
  17. count: store.getState().cp1
  18. })
  19. }
  20. render(){
  21. return (
  22. <div>
  23. <h3>component-cp1-{store.getState().cp1}</h3>
  24. <input type="button" value="increment" onClick={this.increment}/>
  25. <Component2 />
  26. </div>
  27. )
  28. }
  29. }

组件 component2

action.js

  1. export default {
  2. increment(){
  3. return {
  4. type: "+"
  5. }
  6. },{Component} from 'react'
  7. import Actions from './actions'
  8. import Reducer from './reducer'
  9.  
  10. import store from '../../redux/configStore'
  11.  
  12. export default class Component2 extends Component{
  13. increment = () => {
  14. store.dispatch(Actions.increment());
  15. this.setState({
  16. count: store.getState().cp1
  17. })
  18. }
  19. render(){
  20. return (
  21. <div>
  22. <h3>component-cp2-{store.getState().cp2}</h3>
  23. </div>
  24. )
  25. }
  26. }

store.js

  1. import {createStore} from 'redux';
  2. import { combineReducers } from 'redux';
  3. import cp1 from '../components/cp1/reducer'
  4. import cp2 from '../components/cp2/reducer'
  5.  
  6. const rootReducer = combineReducers({
  7. cp1,cp2
  8. });
  9.  
  10. const store = createStore(rootReducer)
  11.  
  12. 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,后面的案例会用到这个层

猜你在找的React相关文章