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