Cruducer

What it is: a library that provides an opinionated implementation of higher-order reducers and action-creators for performing simple CRUD-like operations on collection-like state.

What it does: cuts down on boilerplate of writing reducers and action-creators.

What it is helpful for: reducer composition of normalized substates/state-slices

Installation

yarn add cruducer

Usage

Two utility functions are provided:

• createArrayModule: use this if your collection substate is an array
• createObjectModule: use this if your collection substate is an object-literal (key-value map)

When you call either function, give it four action names (action type):

• setAction: the action name for setting the items
• addAction: the action name for adding an item
• removeAction: the action name for removing an item
• replaceAction: the action name for replacing an item

It will return an object containing:

• a reducer that handles any of the above 4 actions
• an actionCreators object which contains 4 action-creators (functions):
  • setItems - set the collection and overwrite the entire substate
  • addItem - add one item to the collection
  • removeItem - remove one item from the collection
  • replaceItem - replace (overwrite) one item in the collection

Now at this point, you have basic read and write actions-creators that can be used as building blocks for more complex operations on your state.

Examples

createArrayModule

Use this if your collection substate is an array.

import { createArrayModule } from 'cruducer';
import types from './actionTypes';

const { reducer, actionCreators } = createArrayModule({
  setAction:     types.SET_CHICKENS,
  addAction:     types.ADD_CHICKEN,
  removeAction:  types.REMOVE_CHICKEN,
  replaceAction: types.REPLACE_CHICKEN,
});

It will return 4 action creators:

const { setItems, addItem, removeItem, replaceItem } = actionCreators;

Assign them to variables with appropriate names for your use case:

const setChickens = actionCreators.setItem;
const addChicken = actionCreators.addItem;
const removeChicken = actionCreators.removeItem;
const replaceChicken = actionCreators.replaceItem;

And then use them like this:

setChickens([
    { id: 1, name: 'Beeky' },
    { id: 2, name: 'Bert' }
]);

addChicken({ id: 3, name: 'Wingz' })

removeChicken(2);

replaceChicken(1, { id: 1, name: 'Nuggy' })

createObjectModule

Use this if your collection substate is an object-literal (key-value map)

import { createObjectModule } from 'cruducer';
import types from './actionTypes';

const { reducer, actionCreators } = createObjectModule({
  setAction:     types.SET_CHICKENS,
  addAction:     types.ADD_CHICKEN,
  removeAction:  types.REMOVE_CHICKEN,
  replaceAction: types.REPLACE_CHICKEN,
});

It will return 4 action creators:

const { setItems, addItem, removeItem, replaceItem } = actionCreators;

Assign them to variables with appropriate names for your use case:

const setChickens = actionCreators.setItem;
const addChicken = actionCreators.addItem;
const removeChicken = actionCreators.removeItem;
const replaceChicken = actionCreators.replaceItem;

And then use them like this:

setChickens({
    1: { id: 1, name: 'Beeky' },
    2: { id: 2, name: 'Bert' }
});

addChicken(3, { id: 3, name: 'Wingz' })

removeChicken(2);

replaceChicken(1, { id: 1, name: 'Nuggy' })

Options

Custom key for array-based state items: In createArrayModule, by default, the replace and remove operations will look for id as the key on each object. To change this, pass a callback to the utility function:

const { reducer, actionCreators } = createArrayModule({
    // ...
    getKey: item => item.myCustomId
});