redux-juice v1.0.5
Redux-Juice
A simple, lightweight utility to for building normalised business objects in Redux state.
Given an object schema, juice
returns two reducers: byId
and all
.
byId
is an object where resources are indexed by a unique id, all
being an array of all resource ids of that type.
Instalation
With npm: npm install --save redux-juice
Basic Usage
import juice from 'redux-juice';
import { combineReducers } from 'redux';
const blogSchema = {
title: String,
content: String
};
const { byId, all } = juice(blogSchema, 'blog');
const userReducer = combineReducers({ byId, all });
The above will generate reducers which respond to type: ${resourceName}_${attributeName}_${action}
.
dispatch({ type: BLOG_ADD, payload: { id:'uniqueID' } });
dispatch({ type: BLOG_REMOVE, payload: { id:'uniqueID' } });
dispatch({ type: BLOG_TITLE_UPDATE, payload: 'New Blog Title' });
Reduction Functions
const picSchema = {
likeCount: { type: Number, func: 'INCREMENT' },
}
Attributes can be assigned functions to describe transformations to be applied in reducer logic.
Juice comes with a number of built in functions which cover a range of commonly required transformations.
Numbers
INCREMENT
DECREMENT
Arrays
APPEND
PREPEND
REPLACE
REMOVE
INSERT
Boolean
TOGGLE
Actions should be constructed in the following pattern:
{ type: TYPE, payload: { id: 'unique id', value: 'some value', index: 0 } }
index
being relevant to actions which should change arrays.
Custom Functions
Custom functions may also be used:
import shuffle from 'lodash.shuffle';
const anagramSchema = {
content: { type: String, func: { name: 'randomise', func: val => shuffle(val.split('')).join('') } }
};
Custom functions use the signature (existingValue, incomingValue, index) => {return /* something immutable */}
const mirrorSchema = {
reversableStr: { type: String, func: { name: 'REVERSE', func: val => val.split('').reverse().join('') }}
}
const mirrorReducer = combineReducers(juice(mirrorSchema, 'mirror'));
Will allow:
dispatch({ type: 'MIRROR_REVERSIBLESTR_REVERSE', payload: { id: 'resourceId' } };