redux-collections v1.4.4

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/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

redux-collections/actionCreators~collectionPrepend ⇒ Object

Prepends items to the collection

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

redux-collections/actionCreators~collectionIsAppending ⇒ Object

Sets isAppending state on the collection

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

redux-collections/actionCreators~collectionIsPrepending ⇒ Object

Sets isPrepending state on the collection

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

redux-collections/actionCreators~collectionRemove ⇒ Object

Removes item from collection

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

redux-collections/actionCreators~collectionReset ⇒ Object

Completely resets collection state with new items

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

redux-collections/actionCreators~collectionError ⇒ Object

Sets error on collection

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

redux-collections/actionCreators~collectionIsComplete ⇒ Object

Sets isComplete state on collection

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

redux-collections/actionCreators~mapAdd ⇒ Object

Merges given object with the map

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

redux-collections/actionCreators~mapRemove ⇒ Object

Removes object from map at given key

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

redux-collections/actionCreators~mapEdit ⇒ Object

Inject props with merging at given key in map

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

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

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

redux-collections/actionCreators~mapError ⇒ Object

Sets error on object at given key in map

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

redux-collections/actionCreators~mapReset ⇒ Object

Completely resets map with given object

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

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

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

Contributing

npm run build, npm test, MIT, etc.