-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.js
109 lines (75 loc) · 2.45 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
// This is a very simple, but working example of redux without all the optional abstractions
// to run this code via the index.html file you'll need an http server like https://www.npmjs.com/package/http-server
import { createStore, applyMiddleware, combineReducers } from './tiny-redux.js';
/**************************************
* EXAMPLE 1) Simple Redux app
**************************************/
// BANANA STATE #######################
var defaultBananaState = 0;
// reducer that calculates the new state based on
// actions that you dispatch
function banana(state = defaultBananaState, action) {
if (action.type === 'INCREMENT') {
return state + 1;
}
return state;
}
var store = createStore(banana);
// subscribe to store updates
store.subscribe(function() {
console.log('Ex1: STATE UPDATED', store.getState());
})
console.log('Ex1: state:before', store.getState());
store.dispatch({type: 'INCREMENT'});
console.log('Ex1: state:after', store.getState());
/**************************************
* EXAMPLE 2) Less simple Redux app
**************************************/
// APPLE STATE #######################
var defaultAppleState = 0;
function apple(state = defaultAppleState, action) {
if (action.type === 'INCREMENT') {
return state + 1;
}
return state;
}
// ORANGE STATE #########################
var defaultOrangeState = 10;
function orange(state = defaultOrangeState, action) {
if (action.type === 'EAT_ORANGE') {
return state - 1;
}
return state;
}
// logger middleware
function logger(store) {
var getState = store.getState;
return function (next) {
// this fn will be called every time you call store.dispatch if passed to applyMiddleware()
return function (action) {
console.log('Ex2: will dispatch', action);
var returnValue = next(action); // Call the next dispatch method in the middleware chain.
console.log('Ex2: state after dispatch', getState());
return returnValue;
};
};
}
// combine the reducers into a single root reducer
var rootReducer = combineReducers({
apple: apple,
orange: orange
})
var store = createStore(
rootReducer,
applyMiddleware(logger)
);
// listen for store updates
var unsub = store.subscribe(function() {
console.log('Ex2: STATE UPDATED', store.getState());
})
console.log('Ex2: state:before', store.getState());
store.dispatch({type: 'INCREMENT'});
store.dispatch({type: 'EAT_ORANGE'});
console.log('Ex2: state:after', store.getState());
unsub();
store.dispatch({type: 'INCREMENT'});