This repository was archived by the owner on Mar 11, 2024. It is now read-only.
- Notifications
You must be signed in to change notification settings - Fork3
ConsenSys-archive/reselect-tree
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Wrapper around reactjs'sreselectlibrary for creating trees of selectors.
Designed to allow selectors to be organized into separate namespaces easily,with the ability to identify dependencies between selectors in the tree.
Install with:
npm install --save reselect-treeThen define a fileselectors.js:
import{createSelectorTree,createLeaf}from"reselect-tree";constselectors=require("./dist/reselect-tree.js");constcreateSelectorTree=selectors.createSelectorTree;constcreateLeaf=selectors.createLeaf;constselect=createSelectorTree({shop:{taxPercent:state=>state.shop.taxPercent},cart:{items:state=>state.cart.items,subtotal:createLeaf(['./items'],(items)=>items.reduce((acc,item)=>acc+item.value,0)),tax:createLeaf(['/shop/taxPercent','./subtotal'],(taxPercent,subtotal)=>subtotal*(taxPercent/100)),total:createLeaf(['./subtotal','./tax'],(subtotal,tax)=>({total:subtotal+tax}))}});letexampleState={shop:{taxPercent:8,},cart:{items:[{name:'apple',value:1.20},{name:'orange',value:0.95},]}}console.log(select.cart.subtotal(exampleState))// 2.15console.log(select.cart.tax(exampleState))// 0.172console.log(select.cart.total(exampleState))// { total: 2.322 }
You can also select non-leaf nodes, for structured representations:
console.log(select.cart(exampleState)){items:[{name:'apple',value:1.2},{name:'orange',value:0.95}],subtotal:2.15,tax:0.172,total:{total:2.322}}
You can override the default aggregation behavior by defining a custom child_. e.g.:
constselect=createSelectorTree({shop:{taxPercent:state=>state.shop.taxPercent},cart:{_:createLeaf(['./items','./total'],(items,total)=>({ items, total})),items:state=>state.cart.items,subtotal:createLeaf(['./items'],(items)=>items.reduce((acc,item)=>acc+item.value,0)),tax:createLeaf(['/shop/taxPercent','./subtotal'],(taxPercent,subtotal)=>subtotal*(taxPercent/100)),total:createLeaf(['./subtotal','./tax'],(subtotal,tax)=>({total:subtotal+tax}))}});
This changes howselect.cart behaves, instead acting asselect.cart._:
console.log(select.cart(exampleState));// { items:// [ { name: 'apple', value: 1.2 },// { name: 'orange', value: 0.95 } ],// total: { total: 2.322 }}console.log(select.cart._(exampleState));// { items:// [ { name: 'apple', value: 1.2 },// { name: 'orange', value: 0.95 } ],// total: { total: 2.322 }}
About
Abstraction around reactjs's `reselect`to define trees of selectors
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.