-
-
Save ragmha/70e4f79a2ab8700b34023592cfbc09a4 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/vewoju
This file contains hidden or 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"> | |
| <title>JS Bin</title> | |
| <script src="https://fb.me/react-0.14.7.js"> </script> | |
| <script src="https://fb.me/react-dom-0.14.7.js"></script> | |
| <script src="https://unpkg.com/expect/umd/expect.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js"></script> | |
| </head> | |
| <body> | |
| <div id="root"> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| 'use strict'; | |
| var counter = function counter(state, action) { | |
| if (state === undefined) state = 0; | |
| switch (action.type) { | |
| case 'INCREMENT': | |
| return state + 1; | |
| case 'DECREMENT': | |
| return state - 1; | |
| default: | |
| return state; | |
| } | |
| }; | |
| var createStore = function createStore(reducer) { | |
| var state = undefined; | |
| var listeners = []; | |
| var getState = function getState() { | |
| return state; | |
| }; | |
| // only way to change internal 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 }; | |
| }; | |
| var store = createStore(counter); | |
| var render = function render() { | |
| document.body.innerText = store.getState(); | |
| }; | |
| // Registers a callback, to reflect application state | |
| store.subscribe(render); | |
| render(); | |
| document.addEventListener('click', function () { | |
| store.dispatch({ type: 'INCREMENT' }); | |
| }); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const counter = (state = 0, action) => { | |
| switch(action.type) { | |
| case 'INCREMENT': | |
| return state + 1; | |
| case 'DECREMENT': | |
| return state - 1; | |
| default: | |
| return state; | |
| } | |
| }; | |
| const createStore = (reducer) => { | |
| let state; | |
| let listeners = []; | |
| const getState = () => state; | |
| // only way to change internal state | |
| const dispatch = (action) => { | |
| state = reducer(state, action); | |
| listeners.forEach(listener => listener()); | |
| }; | |
| const subscribe = (listener) => { | |
| listeners.push(listener); | |
| return () => { | |
| listeners = listeners.filter(l => l !== listener); | |
| } | |
| }; | |
| dispatch({}); | |
| return { getState, dispatch, subscribe }; | |
| } | |
| const store = createStore(counter); | |
| const render = () => { | |
| document.body.innerText = store.getState(); | |
| }; | |
| // Registers a callback, to reflect application state | |
| store.subscribe(render); | |
| render(); | |
| document.addEventListener('click', () => { | |
| store.dispatch({ type: 'INCREMENT'}); | |
| });</script></body> | |
| </html> |
This file contains hidden or 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
| 'use strict'; | |
| var counter = function counter(state, action) { | |
| if (state === undefined) state = 0; | |
| switch (action.type) { | |
| case 'INCREMENT': | |
| return state + 1; | |
| case 'DECREMENT': | |
| return state - 1; | |
| default: | |
| return state; | |
| } | |
| }; | |
| var createStore = function createStore(reducer) { | |
| var state = undefined; | |
| var listeners = []; | |
| var getState = function getState() { | |
| return state; | |
| }; | |
| // only way to change internal 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 }; | |
| }; | |
| var store = createStore(counter); | |
| var render = function render() { | |
| document.body.innerText = store.getState(); | |
| }; | |
| // Registers a callback, to reflect application state | |
| store.subscribe(render); | |
| render(); | |
| document.addEventListener('click', function () { | |
| store.dispatch({ type: 'INCREMENT' }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment