Skip to content
This repository has been archived by the owner on Jul 4, 2019. It is now read-only.
/ redux-collections Public archive

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

Notifications You must be signed in to change notification settings

khrykin/redux-collections

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm version Build Status

[DEPRECATED]

This package was based on really bad pattern that pushes you to use multiple dispatches in the same place - actually a very very bad thing to do (In React you would trigger multiple rerenders, may lose some data between them, etc). My advice is to design for a single dispatch within given scope and move complexity to reducer logic instead!

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

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

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.

About

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

Resources

Stars

Watchers

Forks

Packages