@@ -2,38 +2,47 @@ import * as React from 'react';
22import * as ReactDOM from 'react-dom' ;
33import { Provider , connect } from 'react-redux' ;
44import PropTypes from 'prop-types' ;
5- import { createStore , applyMiddleware } from 'redux' ;
5+ import { createStore , applyMiddleware , combineReducers } from 'redux' ;
66import logger from 'redux-logger' ;
77
88
99// ACTIONS:
1010
11- const INCREMENT_ACTION = 'INCREMENT_ACTION ' ;
12- function incrementAction ( ) {
11+ const ACTION_1 = 'ACTION_1 ' ;
12+ function action1 ( ) {
1313 return {
14- type : INCREMENT_ACTION
14+ type : ACTION_1
1515 } ;
1616}
1717
18- const DECREMENT_ACTION = 'DECREMENT_ACTION ' ;
19- function decrementAction ( ) {
18+ const ACTION_2 = 'ACTION_2 ' ;
19+ function action2 ( ) {
2020 return {
21- type : DECREMENT_ACTION
21+ type : ACTION_2
2222 } ;
2323}
2424
2525// REDUCERS:
2626
27- const INITIAL_STATE = 2 ;
28- 29- function rootReducer ( state = INITIAL_STATE , action ) {
30- const STEP = 1 ;
27+ function foo ( state = { a : 1 } , action ) {
28+ switch ( action . type ) {
29+ case ACTION_1 :
30+ return {
31+ ...state ,
32+ a : state . a + 1
33+ } ;
34+ default :
35+ return state ;
36+ }
37+ }
3138
39+ function bar ( state = { b : 2 } , action ) {
3240 switch ( action . type ) {
33- case INCREMENT_ACTION :
34- return state + STEP ;
35- case DECREMENT_ACTION :
36- return state - STEP ;
41+ case ACTION_2 :
42+ return {
43+ ...state ,
44+ b : state . b + 1
45+ } ;
3746 default :
3847 return state ;
3948 }
@@ -44,40 +53,40 @@ function rootReducer(state = INITIAL_STATE, action) {
4453class Counter$ extends React . Component {
4554 constructor ( props ) {
4655 super ( props ) ;
47- this . onIncrementHandler = this . onIncrementHandler . bind ( this ) ;
48- this . onDecrementHandler = this . onDecrementHandler . bind ( this ) ;
56+ this . fireAction1 = this . fireAction1 . bind ( this ) ;
57+ this . fireAction2 = this . fireAction2 . bind ( this ) ;
4958 }
5059
51- onIncrementHandler ( ) {
52- this . props . dispatch ( incrementAction ( ) ) ;
60+ fireAction1 ( ) {
61+ this . props . dispatch ( action1 ( ) ) ;
5362 }
5463
55- onDecrementHandler ( ) {
56- this . props . dispatch ( decrementAction ( ) ) ;
64+ fireAction2 ( ) {
65+ this . props . dispatch ( action2 ( ) ) ;
5766 }
5867
5968 render ( ) {
6069 return (
6170 < div >
62- < div > { this . props . counter } </ div >
63- < button onClick = { this . onIncrementHandler } > increment</ button >
64- < button onClick = { this . onDecrementHandler } > decrement</ button >
71+ < div > { JSON . stringify ( this . props . foo ) } </ div >
72+ < div > { JSON . stringify ( this . props . bar ) } </ div >
73+ < button onClick = { this . fireAction1 } > fireAction1</ button >
74+ < button onClick = { this . fireAction2 } > fireAction2</ button >
6575 </ div >
6676 ) ;
6777 }
6878}
6979
7080Counter$ . propTypes = {
71- dispatch : PropTypes . func . isRequired ,
72- counter : PropTypes . number . isRequired
81+ foo : PropTypes . shape ( ) . isRequired ,
82+ bar : PropTypes . shape ( ) . isRequired ,
83+ dispatch : PropTypes . func . isRequired
7384} ;
7485
75- const Counter = connect ( state => ( {
76- counter : state
77- } ) ) ( Counter$ ) ;
86+ const Counter = connect ( ( { foo, bar} ) => ( { foo, bar} ) ) ( Counter$ ) ; // eslint-disable-line no-shadow
7887
7988const store = createStore (
80- rootReducer ,
89+ combineReducers ( { foo , bar } ) ,
8190 applyMiddleware ( logger )
8291) ;
8392
0 commit comments