0.4.4 • Published 8 years ago
react-redux-provide-map v0.4.4
Feel free to submit any pull requests or create issues for anything you think might be useful!
react-redux-provide-map
Provides ES6 Map
instances to React components.
Installation
npm install react-redux-provide react-redux-provide-map --save
Usage
Use react-redux-provide-map
to create providers with predictably named actions
and reducers
specific to manipulating ES6 Map
instances. Create as many providers/instances as you want and share them across multiple components.
The main export provideMap
takes 3 arguments:
mapName
- defaults to'map'
itemName
- defaults to'item'
indexName
- defaults to'index'
Condensed example with default actions
and reducers
import { render } from 'react-dom';
import provideMap from 'react-redux-provide-map';
import GoodStuff from './components/GoodStuff';
const map = provideMap();
const context = {
providers: { map },
providedState: {
map: new Map([
['a', { fruit: 'apple' }],
['b', { fruit: 'banana' }],
['c', { 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
:
setMap (Object map)
- sets the mapupdateMap (Function update)
- updates each key-value pairfilterMap (Function filter)
- filters each key-value pairclearMap ()
- clears the mapsetItem (Mixed index, Mixed item)
- sets the item at someindex
(note: we're referring to thekey
asindex
becausethis.props.key
is reserved for React internally)updateItem (Mixed index, Mixed 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 (Mixed index)
- deletes the item at someindex
And reducers
:
map
- the map instance, of coursemapSize
- the size of the map instanceitem
- if the component instance contains a prop key matching theindexName
(e.g.,index
), theitem
at that key within the map will be providedhasItem
- if the component instance contains a prop key matching theindexName
(e.g.,index
), the existence of theitem
at that key within the map will be provided as a boolean value
Condensed example with predictable, custom actions
and reducers
import { render } from 'react-dom';
import provideMap from 'react-redux-provide-map';
import GoodStuff from './components/GoodStuff';
const goodMap = provideMap('goodMap', 'goodItem', 'goodIndex');
const context = {
providers: { goodMap },
providedState: {
goodMap: new Map([
['a', { fruit: 'apple' }],
['b', { fruit: 'banana' }],
['c', { 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:
setMap
->setGoodMap
updateMap
->updateGoodMap
filterMap
->filterGoodMap
clearMap
->clearGoodMap
setItem
->setGoodItem
updateItem
->updateGoodItem
deleteItem
->deleteGoodItem
And reducers
:
map
->goodMap
mapSize
->goodMapSize
item
->goodItem
hasItem
->hasGoodItem