Skip to content

Instantly share code, notes, and snippets.

@Vchouliaras

Vchouliaras/index.html

Created September 27, 2018 20:32
Show Gist options
  • Save Vchouliaras/85ea1728dc5f00ffb0a10235ad709f20 to your computer and use it in GitHub Desktop.
Save Vchouliaras/85ea1728dc5f00ffb0a10235ad709f20 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/kojozud
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.js"></script>
<script id="jsbin-javascript">
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _Redux = Redux;
var compose = _Redux.compose;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var combineReducers = _Redux.combineReducers;
var bindActionCreators = _Redux.bindActionCreators;
// 1. Redux compose - A composition with FP
var makeUpperCase = function makeUpperCase(string) {
return string.toUpperCase();
};
var repeatThreeTimes = function repeatThreeTimes(string) {
return string.repeat(3);
};
var embolden = function embolden(string) {
return string.bold();
};
var oldWay = embolden(repeatThreeTimes(makeUpperCase('redux')));
var newWay = compose(embolden, repeatThreeTimes, makeUpperCase)('redux');
// 2. Reducer a function with this signature --> (state, action) => newState
var initialState = { result: 0 };
// Action Creator
var addAction = {
type: 'ADD',
value: 4
};
// Reducer
var calculatorReducer = function calculatorReducer(state, action) {
if (state === undefined) state = initialState;
if (action.type === 'ADD') {
return _extends({}, state, {
result: state.result + action.value
});
}
return state;
};
// 3. Createstore - we need to somehow store our state
var store = createStore(calculatorReducer);
// 4. Subscribe to store changes
var subscriber = function subscriber() {
var state = store.getState();
console.log('SUBSCRIPTION !!! ', state.result);
};
var unsubscribe = store.subscribe(subscriber);
// Change state with a dispatcher
store.dispatch(addAction);
</script>
<script id="jsbin-source-javascript" type="text/javascript">const {
compose,
createStore,
applyMiddleware,
combineReducers,
bindActionCreators,
} = Redux
// 1. Redux compose - A composition with FP
const makeUpperCase = string => string.toUpperCase()
const repeatThreeTimes = string => string.repeat(3)
const embolden = string => string.bold()
const oldWay = embolden(repeatThreeTimes(makeUpperCase('redux')))
const newWay = compose(embolden, repeatThreeTimes, makeUpperCase)('redux')
// 2. Reducer a function with this signature --> (state, action) => newState
const initialState = { result: 0 }
// Action Creator
const addAction = {
type: 'ADD',
value: 4
}
// Reducer
const calculatorReducer = (state = initialState, action) => {
if (action.type === 'ADD') {
return {
...state,
result: state.result + action.value
}
}
return state
}
// 3. Createstore - we need to somehow store our state
const store = createStore(calculatorReducer)
// 4. Subscribe to store changes
const subscriber = () => {
const state = store.getState()
console.log('SUBSCRIPTION !!! ', state.result)
}
const unsubscribe = store.subscribe(subscriber)
// Change state with a dispatcher
store.dispatch(addAction)</script></body>
</html>
Raw
jsbin.kojozud.js
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _Redux = Redux;
var compose = _Redux.compose;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var combineReducers = _Redux.combineReducers;
var bindActionCreators = _Redux.bindActionCreators;
// 1. Redux compose - A composition with FP
var makeUpperCase = function makeUpperCase(string) {
return string.toUpperCase();
};
var repeatThreeTimes = function repeatThreeTimes(string) {
return string.repeat(3);
};
var embolden = function embolden(string) {
return string.bold();
};
var oldWay = embolden(repeatThreeTimes(makeUpperCase('redux')));
var newWay = compose(embolden, repeatThreeTimes, makeUpperCase)('redux');
// 2. Reducer a function with this signature --> (state, action) => newState
var initialState = { result: 0 };
// Action Creator
var addAction = {
type: 'ADD',
value: 4
};
// Reducer
var calculatorReducer = function calculatorReducer(state, action) {
if (state === undefined) state = initialState;
if (action.type === 'ADD') {
return _extends({}, state, {
result: state.result + action.value
});
}
return state;
};
// 3. Createstore - we need to somehow store our state
var store = createStore(calculatorReducer);
// 4. Subscribe to store changes
var subscriber = function subscriber() {
var state = store.getState();
console.log('SUBSCRIPTION !!! ', state.result);
};
var unsubscribe = store.subscribe(subscriber);
// Change state with a dispatcher
store.dispatch(addAction);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment