Redux Collections

One-liners for creating redux reducers and action creators for scrollable, editable lists. No dependencies.

This module provides methods for creating reducers for ordered or key-value state to be used in redux apps.

Usage

Using tools like normalizr one can store backend responses in normalized form, such as:

{
  posts: {
    'on-the-electrodynamics-of-moving-bodies': {
      title: "Hello",
      author: 15,
      comments: {
        items: [1, 4, 5]
      },
      likers: {
        error: "Network Timeout"
        items: [1, 5, 3, 7]
      }
    },
    'on-physical-lines-of-force': { /* ... */ },
    /* ... */
  },
 
  comments: {
    1: {
      author: 2,
      text: "Some text",
      isUpdating: true
     },
     2: { /* ... */ },
     /* ... */
  },
 
  users: {
    1: { name: "Kierkegaard" },
    2: { name: "Hegel" },
    /* ... */
  },
 
  recentPosts: {
    items: ['on-physical-lines-of-force', /*, ... */],
    isLoading: true,
  },
}
 
/* etc. */

Aim of this package is to maintain such a structures, including appending, prepending, and setting loading and error states.

Creating Store

 
import { combineReducers, createStore } from 'redux';
 
import {
  collection,
  map,
 
  collectionIsAppending,
  mapAdd,
  collectionAppend,
  collectionError
  /* , ...  
    See list of available action creators below
  */
  } from 'redux-collections';
 
 
const reducer = combineReducers({
    posts: map('posts', ['comments', 'likers']),
    users: map('users'),
    comments: map('comments'),
    recentPosts: collection('recentPosts')
  });
 
const store = createStore(reducer);
 
const { dispatch } = store;

Dispatching Actions

 
/* Somewhere before fetching response */
 
  dispatch(collectionIsAppending('recentPosts'));
 
/* Somewhere after fetching and normalizing response */
 
  dispatch(mapAdd('posts', {
      'elements': { /* ... */ },
      'philosophiae-naturalis': { /* ... */ }
      /*, ... */
  }));
 
  dispatch(mapAdd('users', {
      12: { /* ... */ },
      13: { /* ... */ }
      /*, ... */
  }));
 
  dispatch(mapAdd('comments',  {
      115: { /* ... */ },
      116: { /* ... */ }
      /*, ... */
  }));
 
  dispatch(collectionAppend('recentPosts', [
    'elements',
    'philosophiae-naturalis'
    /*, ... */
  ]);
 
  /* Somewhere after fetch error */
 
  dispatch(collectionError('recentPosts', 'Network Timeout'));
 

Fetching child collection in a map:

 
  dispatch(collectionIsAppending(
    'comments',
    'posts',
    'philosophiae-naturalis'
  ));
 
  dispatch(mapAdd('comments', /* ... */ );
 
  dispatch(collectionPrepend(
    'comments',
    [ 18, 19 /*, ... */],
    'posts',
    'philosophiae-naturalis'
  );
 

Modules

redux-collections/actionCreators

redux-collections/reducers

redux-collections/actionCreators

• redux-collections/actionCreators
  • ~collectionAppend ⇒ Object
  • ~collectionPrepend ⇒ Object
  • ~collectionIsAppending ⇒ Object
  • ~collectionIsPrepending ⇒ Object
  • ~collectionRemove ⇒ Object
  • ~collectionReset ⇒ Object
  • ~collectionError ⇒ Object
  • ~collectionIsComplete ⇒ Object
  • ~mapAdd ⇒ Object
  • ~mapRemove ⇒ Object
  • ~mapEdit ⇒ Object
  • ~mapIsEditing ⇒ Object
  • ~mapIsLoading ⇒ Object
  • ~mapError ⇒ Object
  • ~mapReset ⇒ Object

redux-collections/actionCreators~collectionAppend ⇒ Object

Appends items to the collection

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
collection	string
items	array
[map]	string	Name of parent map where collection lives
[parentId]	Number | String	Key of parent map where collection lives

redux-collections/actionCreators~collectionPrepend ⇒ Object

Prepends items to the collection

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
collection	string
items	array
[map]	string	Name of parent map where collection lives
[parentId]	Number | String	Key of parent map where collection lives

redux-collections/actionCreators~collectionIsAppending ⇒ Object

Sets isAppending state on the collection

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
collection	string
items	array
[map]	string	Name of parent map where collection lives
[parentId]	Number | String	Key of parent map where collection lives

redux-collections/actionCreators~collectionIsPrepending ⇒ Object

Sets isPrepending state on the collection

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
collection	string
[map]	string	Name of parent map where collection lives
[parentId]	Number | String	Key of parent map where collection lives

redux-collections/actionCreators~collectionRemove ⇒ Object

Removes item from collection

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
collection	string
id	string	Element of array to remove
[map]	string	Name of parent map where collection lives
[parentId]	Number | String	Key of parent map where collection lives

redux-collections/actionCreators~collectionReset ⇒ Object

Completely resets collection state with new items

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
collection	string
items	array
[map]	string	Name of parent map where collection lives
[parentId]	Number | String	Key of parent map where collection lives

redux-collections/actionCreators~collectionError ⇒ Object

Sets error on collection

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
collection	string
items	string | object
[map]	string	Name of parent map where collection lives
[parentId]	Number | String	Key of parent map where collection lives

redux-collections/actionCreators~collectionIsComplete ⇒ Object

Sets isComplete state on collection

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
collection	string
[map]	string	Name of parent map where collection lives
[parentId]	Number | String	Key of parent map where collection lives

redux-collections/actionCreators~mapAdd ⇒ Object

Merges given object with the map

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
map	string	Name of the map
items	Object	Object to merge with the map

redux-collections/actionCreators~mapRemove ⇒ Object

Removes object from map at given key

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
map	string	Name of the map
id	Number	Key of object in map

redux-collections/actionCreators~mapEdit ⇒ Object

Inject props with merging at given key in map

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
map	string	Name of the map
id	Number	Key of object in map
props	Object	Object with edited props

redux-collections/actionCreators~mapIsEditing ⇒ Object

Sets isEditing state on object at given key in map

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
map	string	Name of the map
id	Number	Key of object in map

redux-collections/actionCreators~mapIsLoading ⇒ Object

Sets isLoading state on object at given key in map

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
map	string	Name of the map
id	Number	Key of object in map

redux-collections/actionCreators~mapError ⇒ Object

Sets error on object at given key in map

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
map	string	Name of the map
id	Number	Key of object in map
error	string | object	Key of object in map

redux-collections/actionCreators~mapReset ⇒ Object

Completely resets map with given object

Kind: inner property of redux-collections/actionCreators
Returns: Object - action

Param	Type	Description
map	string	Name of the map
items	Object	New map state

redux-collections/reducers

• redux-collections/reducers
  • ~collection(collection, [mixin]) ⇒ function
  • ~map(map, [names], [mixin]) ⇒ function

redux-collections/reducers~collection(collection, [mixin]) ⇒ function

Creates a reducer for ordered collection

Kind: inner method of redux-collections/reducers
Returns: function - reducer

Param	Type	Description
collection	string	Name of collection
[mixin]	function	Mixin reducer

redux-collections/reducers~map(map, [names], [mixin]) ⇒ function

Creates a reducer for key: value map

Kind: inner method of redux-collections/reducers
Returns: function - reducer

Param	Type	Description
map	string	Name of map
[names]	array	Array of names of child ordered collections (if present)
[mixin]	function	Mixin reducer

Contributing

npm run build, npm test, MIT, etc.