Simple Redux implementation

Custom implementation for Redux :

//action types
const 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