Create a gist now

Instantly share code, notes, and snippets.

@vmayakumar /Redux.js
Last active Jan 20, 2017

What would you like to do?
Redux js
function compose(...funcs) {
funcs = funcs.filter(func => typeof func === 'function')
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var store = createStore(reducer, preloadedState, enhancer)
var dispatch = store.dispatch
var chain = []
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
var ActionTypes = {
INIT: '@@redux/INIT'
}
function createStore(reducer, preloadedState, enhancer) {
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState
preloadedState = undefined
}
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
return enhancer(createStore)(reducer, preloadedState)
}
if (typeof reducer !== 'function') {
throw new Error('Expected the reducer to be a function.')
}
var currentReducer = reducer
var currentState = preloadedState
var currentListeners = []
var nextListeners = currentListeners
var isDispatching = false
function getState() {
return currentState
}
function dispatch(action) {
try {
isDispatching = true
currentState = currentReducer(currentState, action)
} finally {
isDispatching = false
}
return action
}
// When a store is created, an "INIT" action is dispatched so that every
// reducer returns their initial state. This effectively populates
// the initial state tree.
dispatch({ type: ActionTypes.INIT })
return {
dispatch,
getState
}
}
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
var timer = ({ dispatch, getState }) => next => action => {
var start = new Date().getMilliseconds();
next(action);
var time = new Date().getMilliseconds() - start;
console.log(time);
}
var logger = ({ dispatch, getState }) => next => action => {
console.log("[BEFORE]: ", getState());
next(action);
console.log("[AFTER]: ", getState());
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
var reducer = (state = 1, action) => {
if(action.type === "SQUARE_CALCULATOR") {
return action.payload * action.payload;
} else {
return state;
}
}
let store = createStore(
reducer,
applyMiddleware(thunk, timer, logger)
)
store.dispatch({type: "SQUARE_CALCULATOR", payload: 10})
store.dispatch({type: "SQUARE_CALCULATOR", payload: 2})
store.dispatch((dispatch) => {
setTimeout(function(){
dispatch({type: "SQUARE_CALCULATOR", payload: 4})
}, 1000);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment