Created
April 13, 2017 17:28
-
-
Save anteriovieira/1bfd5eaa1c8dbf6231245668d285bf73 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/wufotac
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<script id="jsbin-javascript"> | |
// clear console | |
'use strict'; | |
console.clear(); | |
// reducers | |
var count = function count(state, action) { | |
if (state === undefined) state = 0; | |
switch (action.type) { | |
case 'ADD': | |
return state + 1; | |
default: | |
return state; | |
} | |
}; | |
var log = function log(state, action) { | |
if (state === undefined) state = 13; | |
console.log(state, action); | |
switch (action.type) { | |
case 'ADD': | |
return state + 1; | |
default: | |
return state; | |
} | |
}; | |
// end reducers | |
var combineReducers = function combineReducers(reducers) { | |
return function (state, action) { | |
if (state === undefined) state = {}; | |
return Object.keys(reducers).reduce(function (nextState, key) { | |
nextState[key] = reducers[key](state[key], action); | |
return nextState; | |
}, {}); | |
}; | |
}; | |
var createStore = function createStore(reducer) { | |
var state = undefined; | |
var listeners = []; | |
var getState = function getState() { | |
return state; | |
}; | |
var dispatch = function dispatch(action) { | |
state = reducer(state, action); | |
listeners.forEach(function (listener) { | |
return listener(); | |
}); | |
}; | |
var subscribe = function subscribe(listener) { | |
listeners.push(listener); | |
return function () { | |
listeners = listeners.filter(function (l) { | |
return l !== listener; | |
}); | |
}; | |
}; | |
dispatch({}); | |
return { getState: getState, dispatch: dispatch, subscribe: subscribe }; | |
}; | |
// Combine reducers | |
var countApp = combineReducers({ | |
log: log, count: count | |
}); | |
var store = createStore(countApp); | |
var render = function render() { | |
var state = store.getState(); | |
document.body.innerText = state.count + ' => ' + state.log; | |
}; | |
render(); | |
store.subscribe(render); | |
document.addEventListener('click', function () { | |
store.dispatch({ type: 'ADD' }); | |
}); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">// clear console | |
console.clear() | |
// reducers | |
const count = (state = 0, action) => { | |
switch (action.type) { | |
case 'ADD': | |
return state + 1 | |
default : | |
return state | |
} | |
} | |
const log = (state = 13, action) => { | |
console.log(state, action) | |
switch (action.type) { | |
case 'ADD': | |
return state + 1 | |
default : | |
return state | |
} | |
} | |
// end reducers | |
const combineReducers = (reducers) => { | |
return (state = {}, action) => { | |
return Object.keys(reducers).reduce( | |
(nextState, key) => { | |
nextState[key] = reducers[key]( | |
state[key], action | |
) | |
return nextState | |
}, | |
{} | |
) | |
} | |
} | |
const createStore = (reducer) => { | |
let state = undefined | |
let listeners = [] | |
const getState = () => state; | |
const dispatch = (action) => { | |
state = reducer(state, action) | |
listeners.forEach(listener => listener()) | |
} | |
const subscribe = (listener) => { | |
listeners.push(listener) | |
return () => { | |
listeners = listeners.filter((l) => { | |
return l !== listener | |
}) | |
} | |
} | |
dispatch({}) | |
return { getState, dispatch, subscribe } | |
} | |
// Combine reducers | |
const countApp = combineReducers({ | |
log, count | |
}) | |
const store = createStore(countApp) | |
const render = () => { | |
var state = store.getState() | |
document.body.innerText = state.count + ' => ' + state.log | |
} | |
render() | |
store.subscribe(render) | |
document.addEventListener('click', () => { | |
store.dispatch({type: 'ADD'}) | |
}) | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// clear console | |
'use strict'; | |
console.clear(); | |
// reducers | |
var count = function count(state, action) { | |
if (state === undefined) state = 0; | |
switch (action.type) { | |
case 'ADD': | |
return state + 1; | |
default: | |
return state; | |
} | |
}; | |
var log = function log(state, action) { | |
if (state === undefined) state = 13; | |
console.log(state, action); | |
switch (action.type) { | |
case 'ADD': | |
return state + 1; | |
default: | |
return state; | |
} | |
}; | |
// end reducers | |
var combineReducers = function combineReducers(reducers) { | |
return function (state, action) { | |
if (state === undefined) state = {}; | |
return Object.keys(reducers).reduce(function (nextState, key) { | |
nextState[key] = reducers[key](state[key], action); | |
return nextState; | |
}, {}); | |
}; | |
}; | |
var createStore = function createStore(reducer) { | |
var state = undefined; | |
var listeners = []; | |
var getState = function getState() { | |
return state; | |
}; | |
var dispatch = function dispatch(action) { | |
state = reducer(state, action); | |
listeners.forEach(function (listener) { | |
return listener(); | |
}); | |
}; | |
var subscribe = function subscribe(listener) { | |
listeners.push(listener); | |
return function () { | |
listeners = listeners.filter(function (l) { | |
return l !== listener; | |
}); | |
}; | |
}; | |
dispatch({}); | |
return { getState: getState, dispatch: dispatch, subscribe: subscribe }; | |
}; | |
// Combine reducers | |
var countApp = combineReducers({ | |
log: log, count: count | |
}); | |
var store = createStore(countApp); | |
var render = function render() { | |
var state = store.getState(); | |
document.body.innerText = state.count + ' => ' + state.log; | |
}; | |
render(); | |
store.subscribe(render); | |
document.addEventListener('click', function () { | |
store.dispatch({ type: 'ADD' }); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment