0.4.3 • Published 8 years ago
react-redux-provide-list v0.4.3
Feel free to submit any pull requests or create issues for anything you think might be useful!
react-redux-provide-list
Provides Array
instances to React components.
Installation
npm install react-redux-provide react-redux-provide-list --save
Usage
Use react-redux-provide-list
to create providers with predictably named actions
and reducers
specific to manipulating arrays. Create as many providers/instances as you want and share them across multiple components.
The main export provideList
takes 3 arguments:
listName
- defaults to'list'
itemName
- defaults to'item'
indexName
- defaults to'index'
Condensed example with default actions
and reducers
import { render } from 'react-dom';
import provideList from 'react-redux-provide-list';
import GoodStuff from './components/GoodStuff';
const list = provideList();
const context = {
providers: { list },
providedState: {
list: [
{ fruit: 'apple' },
{ fruit: 'banana' }
{ vegetable: 'carrot' }
]
}
};
// the GoodStuff component should be decorated with @provide
render(<GoodStuff { ...context } />, document.getElementById('root'));
An instance of GoodStuff
will then be able to access the following actions
:
setList (Array list)
- sets the listsortList (Function sort)
- sorts the listreverseList ()
- reverses the listupdateList (Function update)
- updates each item in the listfilterList (Function filter)
- filters items in the listshiftList ()
- removes the first item from the listpopList ()
- removes the last item from the listsliceList (begin, end)
- sets the list to the result of the slicespliceList (begin, deleteCount, ...items)
- sets the list to the resulting spliceclearList ()
- clears the listunshiftItem (...items)
- puts the item(s) at the beginning of the listpushItem (...items)
- puts the item(s) at the end of the listsetItem (index, item)
- sets the item at theindex
updateItem (index, item)
- updates or sets the item at someindex
; if the existing item the update are both objects, it will merge the two as a new objectdeleteItem (index)
- deletes the item at someindex
And reducers
:
list
- the list instance, of courselistLength
- the length of the list instanceitem
- if the component instance contains a prop key matching theindexName
(e.g.,index
), theitem
at that key within the list will be provided
Condensed example with predictable, custom actions
and reducers
import { render } from 'react-dom';
import provideList from 'react-redux-provide-list';
import GoodStuff from './components/GoodStuff';
const goodList = provideList('goodList', 'goodItem', 'goodIndex');
const context = {
providers: { goodList },
providedState: {
goodList: [
{ fruit: 'apple' },
{ fruit: 'banana' }
{ vegetable: 'carrot' }
]
}
};
// the GoodStuff component should be decorated with @provide
render(<GoodStuff { ...context } />, document.getElementById('root'));
An instance of GoodStuff
will then be able to access the same actions
as above, but with slightly different keys:
setList
->setGoodList
sortList
->sortGoodList
reverseList
->reverseGoodList
updateList
->updateGoodList
filterList
->filterGoodList
shiftList
->shiftGoodList
popList
->popGoodList
sliceList
->sliceGoodList
spliceList
->spliceGoodList
clearList
->clearGoodList
unshiftItem
->unshiftGoodItem
pushItem
->pushGoodItem
setItem
->setGoodItem
updateItem
->updateGoodItem
deleteItem
->deleteGoodItem
And reducers
:
list
->goodList
listLength
->goodListLength
item
->goodItem