Custom implementation for Redux :
//action typesconst UPDATE_USER = 'UPDATE_USER';
const UPDATE_CONTACT = 'UPDATE_CONTACT';
//helpers
const InitialState = {};
const merge = (prev, next) => Object.assign({}, prev, next);
//action builder
const updateUser = update => ({
type : UPDATE_USER,
payload : update
});
const addContact = newContact => ({
type : UPDATE_CONTACT,
payload : newContact
});
//Individual reducers handle their needed actions
const contactReducer = (state = [], action) => {
if(action.type === UPDATE_CONTACT){
return [...state, action.payload]
}
return state;
}
const userReducer = (state = {}, action) =>{
if(action.type === UPDATE_USER){
return merge(state, action.payload);
}
if(action.type === UPDATE_CONTACT){
//here we can updte user state with latest contact info update.
return merge(state, {prevContact : action.payload })
}
return state
}
class Store{
constructor(reducer, initialState){
this.reducer = reducer;
this.state = initialState;
}
getState(){
return this.state;
}
dispatch(update){
this.state = this.reducer(this.state, update);
}
}
//This return state, utilizing the secondary reducers.
const reducer = (state, action) => ({
user : userReducer(state.user, action),
contacts : contactReducer(state.contacts, action)
});
const store = new Store(reducer, InitialState); //user actual reducer
store.dispatch(updateUser({foo : 'foo'}));
store.dispatch(updateUser({bar : 'bar'}));
store.dispatch(updateUser({foo : 'foo'}));
store.dispatch(addContact({ name : 'sanjeev', phone : '132232222'}));
store.dispatch(addContact({ name : 'jhon', phone : '322343222'}));
console.log(store.getState());
Simple implementation of Redux library:
//Every single reduer can respond every single action. Update recent contact in user state using userReducer.//import { createStore } from 'redux';
const { createStore, combineReducers } = require('redux');
//action types
const UPDATE_USER = 'UPDATE_USER';
const UPDATE_CONTACT = 'UPDATE_CONTACT';
const DEFAULT_STATE = {};
const merge = (prev, next) => Object.assign({}, prev, next);
//action builder
const updateUser = update => ({
type : UPDATE_USER,
payload : update
});
const addContact = newContact => ({
type : UPDATE_CONTACT,
payload : newContact
});
//Individual reducers handle their needed actions
const contactReducer = (state = [], action) => {
if(action.type === UPDATE_CONTACT){
return [...state, action.payload]
}
return state;
}
const userReducer = (state = {}, action) =>{
if(action.type === UPDATE_USER){
return merge(state, action.payload);
}
if(action.type === UPDATE_CONTACT){
//here we can updte user state with latest contact info update.
return merge(state, {prevContact : action.payload })
}
return state
}
//Reducer just registering other secondary reducers.
const reducer = combineReducers({
user : userReducer,
contacts : contactReducer
});
const store = createStore(reducer, DEFAULT_STATE); //user actual reducer
store.dispatch(updateUser({foo : 'foo'}));
store.dispatch(updateUser({bar : 'bar'}));
store.dispatch(updateUser({foo : 'foo'}));
store.dispatch(addContact({ name : 'sanjeev', phone : '132232222'}));
store.dispatch(addContact({ name : 'jhon', phone : '322343222'}));
console.log(store.getState());
Separation of code in multiple files:
//actions.js
//action types
export const UPDATE_USER = 'UPDATE_USER';
export const UPDATE_CONTACT = 'UPDATE_CONTACT';
//action creators
export const updateUser = update => ({
type : UPDATE_USER,
payload : update
});
export const addContact = newContact => ({
type : UPDATE_CONTACT,
payload : newContact
});
//reducer.js
import { combineReducers } from 'redux';
import { UPDATE_USER, UPDATE_CONTACT} from './actions';
const merge = (prev, next) => Object.assign({}, prev, next);
//Individual reducers handle their needed actions
const contactReducer = (state = [], action) => {
if(action.type === UPDATE_CONTACT){
return [...state, action.payload]
}
return state;
}
const userReducer = (state = {}, action) =>{ //we can implement switch here.
if(action.type === UPDATE_USER){
return merge(state, action.payload);
}
if(action.type === UPDATE_CONTACT){
//here we can updte user state with latest contact info.
return merge(state, {prevContact : action.payload });
}
return state;
}
export const reducer = combineReducers({
user : userReducer,
contacts : contactReducer
});
//store.js
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer); //user actual reducer
export default store;
Comments
Post a Comment