demystify methods of redux library for easy understanding of how it's internally implemented.
Note : not an exact redux method implementation but a simpler version
- applyMiddleware - Middleware lets you extend Redux with custom functionality.
- compose - Composes functions from right to left.
- combineReducers - Function turns an object whose values are different reducing functions into a single reducing function.
- applyMiddleware
const {applyMiddleware} = require('./applyMiddleware');
const a = function aState(state) {
console.log("state => a");
return function aNext(next) {
console.log("next => a");
return function aAction(action) {
console.log("action => a");
next(action);
}
}
};
const b = function bState(state) {
console.log("state => b");
return function bNext(next) {
console.log("next => b");
return function bAction(action) {
console.log("action => b");
next(action);
}
}
};
const c = function cState(state) {
console.log("state => c");
return function cNext(next) {
console.log("next => c");
return function cAction(action) {
console.log("action => c");
next(action);
}
}
};
const createStore = () => {
console.log("index createStore");
return {
dispatch: (action) => {
console.log("index original dispatch");
},
getState : () => {
console.log("index original getState");
return {};
}};
};
const reducers = (reducer,initial,enhancer)=> {
console.log("index reducers");
};
let {getState,dispatch} = applyMiddleware(a,b,c)(createStore)(reducers); /* getState, aAction */
if(dispatch){
dispatch("a");
}
- combineReducers
const {combineReducers} = require('./combineReducers');
const firstReducer = (state = {},action ) => {
switch (action.type) {
case 'f':
return Object.assign({},state,{
key: 'f'
});
case 'ff':
return Object.assign({},state,{
key: 'ff'
});
default : return state;
}
};
const secondReducer = (state = {},action ) => {
switch (action.type) {
case 's':
return Object.assign({},state,{
key: 's'
});
case 'ss':
return Object.assign({},state,{
key: 'ss'
});
default : return state;
}
};
const rootReducer = combineReducers({firstReducer,secondReducer});
let state = {'key':''};
console.log("initial state => ", state);
state = rootReducer(state,{type:"f"});
console.log("after first update => ",state);
state = rootReducer(state,{type:"ff"});
console.log("after second update => ",state);
state = rootReducer(state,{type:"s"});
console.log("after third update => ",state);