redux-wrapper-extended

This package gives you shortcut for redux.

Quick-Start

import {StoreWrapper,ReducerWrapper,dispatchAction, combineReducerWrapper, uselessReducer} from 'redux-wrapper-extended';

Assumption

• Action has property type
• Action has property payload
• other than those two will be ignored

you have action object that looks like:

var action = {
    type:"Something",
    payload //either object or value
}

Is it simplifying? YES and NO

Given you have this reducer

const countReducer = (state=0,action) => {
    if(action.type === "INCREMENT"){
        return state + action.payload;
    }
    if(action.type === "DECREMENT"){
        return state - action.payload;
    }
    if(action.type === "SETVAL"){
        return action.payload;
    }
    return state;
}

By using reducer-wrapper-extended, you could make something like this:

const countReducerWrapper =
new ReducerWrapper(0)
    .addHandler("INCREMENT",(s,pl) => {
        return s + pl;
    })
    .addHandler("DECREMENT",(s,pl) => {
        return s - pl;
    })
    .addPropChangedHandler("SETVAL");

and you can use it like this:

const countReducer = countReducerWrapper.getReducer();

const storeWrapper = new StoreWrapper(
    { //combining reducers
        count: countReducerWrapper.getReducer(),
        detail: //some other reducer
    },
    { //initial properties, nothing fancy
        count:0,
        detail: {
        // a complex object
        }
    });

Don't worry, it's just a wrapper. you can get the actual redux store

var store = storeWrapper.getStore();

store.subscribe(() => {
    console.log("Store changed", store.getState());
});

Getting Fancier

const detailReducerWrapper =
new ReducerWrapper()

    .addPropChangedHandler("SET_NAME",(x) => x.name)

    .addPropChangedHandler("SET_AGE",(x) => x.age, (state,payload) => {
        if(payload<18){
          return 18;
        }
        return payload;
    })

    .addPropChangedHandler("SET_PHONE",(x) => x.contacts.phone);

then you create a store

const storeWrapper = new StoreWrapper(
    {
        count: countReducerWrapper.getReducer(),
        detail: detailReducerWrapper.getReducer(),
    },
    {
        count:0,
        detail:{
            name:"Anjar",
            age:27,
            contacts:{
                email:"[email protected]",
                phone:"81807978"
            }
        }
    });

Combining Cascading Reducers

Please take note that the idea the state should be as flattened as possible. But if you are still willing to have some level of hierarchies, here are the samples

run detailReducerWrapper's reducer is invoked, then now nameReducerWrapper's reducer is invoked

Take note that the context of the state_ is -> detail -> name

const nameReducerWrapper = new ReducerWrapper("Jon Doe") // default value
    .addHandler("CHANGE_NAME",(state,payload) => {
        if(!hasFunnyCharacter()){
            return payload;
        }
        return state;
    })

const storeWrapper = new StoreWrapper(
    {
        detail:detailReducerWrapper.getReducer({
            // override
            name:nameReducerWrapper.getReducer(),

            // maintain existence of 'age'
            age: uselessReducer
        }),
    },
    {
        detail:{
            name:"Anjar",
            age:27
        }
    });

You can also do something like this

const storeWrapper = new StoreWrapper(
    {
        detail:{
            name:nameReducerWrapper.getReducer(),

            // maintain existence of 'age'
            age: uselessReducer,

            contacts:{

                // override contact in, state is relative to its context
                email:emailReducerWrapper.getReducer(),

                // maintain existence of 'phone'
                phone:ReducerWrapper.uselessReducer,
            }
        },
    },
    {
        detail:{
            name:"Anjar",
            age:27,
            contacts:{
                email:"[email protected]",
                phone:"81807978"
            }
        }
    });

Others

var store = storeWrapper.getStore();
store.dispatch({type: "SET_VALUE", payload: 10});

equal with

storeWrapper.dispatch("SET_VALUE",10);

this is a function pointer. the function itself checks

• if state is undefined, then return null
• else, return original state

ReducerWrapper.uselessReducer

dispatch({
    type: 'ActionName',
    payload: {
        some:'objects'
    }
})
// can be replaced with
dispatchAction(dispatch, 'ActionName', {
    some:'objects'    
})

Combine Reducer

You can combine reducer like this

var reducers = combineReducerWrapper({
    detail:parentReducerWrapper.getReducer({

        // this is invoked after parentReducerWrapper's reducer
        name:childReducerWrapper.getReducer(),

        // this is to maintain that the state is not removed by parent reducer
        age: uselessReducer,
    }),
  });

var reducers = combineReducerWrapper({
    detail:detailReducerWrapper.getReducer({
        name:nameReducerWrapper.getReducer(),
        contacts:{
            email:emailReducerWrapper.getReducer(),
            phone:ReducerWrapper.uselessReducer,
        }
    }),
  });

StoreWrapper

| Function | Purpose | | ------------- |:-------------:| | dispatch(type, payload) | will call the store.dispatch with action with the same type and payload| | getStore() | return original redux store | | getCombinedReducers() | return combined reducers of the wrapped store |

ReducerWrapper

| Function | Purpose | | ------------- |:-------------:| | addHandler(type, handler) | the type is type of the action, the handler must have signature function(state, payloadOfAction) and return new state | | addPropChangedHandler(type, navigationProperty, handler) | similar to addHandler(type, handler) but it has navigation property and the state is the context of that navigation property | | getReducer() | compose the reducer | | static uselessReducer | see sample above | | static combine(object) | combine reducer |