redux-cloneable v1.3.1
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()); // {}