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!
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.
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.
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;
/* 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'
);
- 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
- ~collectionAppend ⇒
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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
- ~collection(collection, [mixin]) ⇒
function
- ~map(map, [names], [mixin]) ⇒
function
- ~collection(collection, [mixin]) ⇒
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 |
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 |
npm run build
, npm test
, MIT, etc.