0.4.3 • Published 10 years ago

react-redux-provide-list v0.4.3

Weekly downloads
3
License
MIT
Repository
github
Last release
10 years ago

Feel free to submit any pull requests or create issues for anything you think might be useful!

react-redux-provide-list

build status npm version npm downloads

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:

  1. listName - defaults to 'list'
  2. itemName - defaults to 'item'
  3. 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 list
  • sortList (Function sort) - sorts the list
  • reverseList () - reverses the list
  • updateList (Function update) - updates each item in the list
  • filterList (Function filter) - filters items in the list
  • shiftList () - removes the first item from the list
  • popList () - removes the last item from the list
  • sliceList (begin, end) - sets the list to the result of the slice
  • spliceList (begin, deleteCount, ...items) - sets the list to the resulting splice
  • clearList () - clears the list
  • unshiftItem (...items) - puts the item(s) at the beginning of the list
  • pushItem (...items) - puts the item(s) at the end of the list
  • setItem (index, item) - sets the item at the index
  • updateItem (index, item) - updates or sets the item at some index; if the existing item the update are both objects, it will merge the two as a new object
  • deleteItem (index) - deletes the item at some index

And reducers:

  • list - the list instance, of course
  • listLength - the length of the list instance
  • item - if the component instance contains a prop key matching the indexName (e.g., index), the item 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
0.4.3

10 years ago

0.4.2

10 years ago

0.4.1

10 years ago

0.4.0

10 years ago

0.3.0

10 years ago

0.2.0

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago