结构
-
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: "+"
- }
- },{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
,后面的案例会用到这个层