Redux Clonable

Use redux-cloneable and never write another reducer again.

Instalation

Redux-cloneable is distributed as a npm package

npm install --save redux-cloneable

It can then be imported as a module

import { kvsReducer } from "redux-cloneable";

Design

Redux-cloneable exports several abstract reducers, which are then cloned into your redux store. When an abstract reducer is cloned, it is passed a unique prefix value to identify it. Redux-cloneable also exports multiple meta action creators, which are then used to create action creators which are bound to a specific reducer. Lastly, redux-cloneable exports selectors, which can be composed with higher level selectors to fetch parts of the state.

A note about imports

All parts can be imported from the bundle as follows

import { kvsReducer, getStore } from "redux-cloneable/kvs";

Or they can be imported as es6 with annotations like this

import { kvsReducer, getStore } from "redux-cloneable/src/kvs";

Usage

Redux cloneable has multiple abstract reducers, the simplest of which is a key value store.

First add the reducer. The reducers only parameter is its prefix. The prefix is added to actions to identify them.

// Reducer.js
import { combineReducers } from "redux";
import  kvs from "redux-cloneable/kvs";

export default combineReducers({
    kvs: kvs("KVS");
})

Then add the types

// Types.js
import { makeTypes } from "redux-cloneable/kvs";

const {
    set,
    reset
} = makeTypes("KVS");

export {
    set as KVS_SET,
    reset as KVS_RESET
}

And add the actions

// Actions
import { createAction } from "redux-actions";
import {
    KVS_SET,
    KVS_RESET
} from "./Types.js"

export const setKvs = createAction(KVS_SET);
export const resetKvs = createAction(KVS_RESET);

Lastly, add the selectors

import { createSelector } from "reselect";
import { getStore } from "redux-actions/kvs";

export const getKvs = createSelector(
    state => state.kvs,
    kvs => getStore(kvs)
);

Then

• dispatch actions
• select store
• ???
• profit

import { setKvs, resetKvs } from "./actions";
import { getKvs } from "./selectors";

store.dispatch(setKvs{ a: 1, b: 2 });
getKvs(store.getState()); // { a: 1, b: 2 }
store.dispatch(resetKvs())
getKvs(store.getState()); // {}