# reselect-tree

> Wrapper around reselect for creating selector trees

Latest version **1.3.7** (published 2022-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install reselect-tree
pnpm add reselect-tree
yarn add reselect-tree
bun add reselect-tree
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.7 |
| Published | 2022-05-04 |
| First published | 2018-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 27.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | trufflesuite.com |
| Maintainers | realcliffzhang, benjamincburns, jeff.smale, kevinbluer, tenthirtyone, lsqproduction, kevinweaver, leeftk, gnidan, davidmurdoch, eggplantzzz, fainashalts, haltman, rkalis, cds-amal, micaiahreid |
| Keywords | reselect, tree |

## Links

- npm: https://www.npmjs.com/package/reselect-tree
- Repository: https://github.com/trufflesuite/reselect-tree
- Homepage: https://github.com/trufflesuite/reselect-tree#readme
- Issues: https://github.com/trufflesuite/reselect-tree/issues
- npm.io page: https://npm.io/package/reselect-tree

## Dependencies (3)

- [debug](https://npm.io/package/debug.md) ^3.1.0
- [reselect](https://npm.io/package/reselect.md) ^4.0.0
- [json-pointer](https://npm.io/package/json-pointer.md) ^0.6.1

## Recent versions

- 1.3.7 (latest) — 2022-05-04
- 1.3.6 — 2022-05-02
- 1.3.5 — 2021-12-08
- 1.3.4 — 2020-09-23
- 1.3.3 — 2020-05-07
- 1.3.2 — 2020-05-06
- 1.3.1 — 2019-05-09
- 1.3.0 — 2019-02-25
- 1.2.0 — 2018-04-20
- 1.1.3 — 2018-03-05
- 1.1.2 — 2018-03-05
- 1.1.1 — 2018-03-05
- 1.1.0 — 2018-03-05
- 1.0.0 — 2018-03-01

## README

reselect-tree
=============

Wrapper around reactjs's [reselect](https://github.com/reactjs/reselect)
library 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.

Usage Example
=============

Install with:

```
npm install --save reselect-tree
```


Then define a file `selectors.js`:

```javascript
import { createSelectorTree, createLeaf } from "reselect-tree";

const selectors = require("./dist/reselect-tree.js");
const createSelectorTree = selectors.createSelectorTree;
const createLeaf = selectors.createLeaf;

const select = 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 })
    )
  }
});


let exampleState = {
  shop: {
    taxPercent: 8,
  },
  cart: {
    items: [
      { name: 'apple', value: 1.20 },
      { name: 'orange', value: 0.95 },
    ]
  }
}

console.log(select.cart.subtotal(exampleState)) // 2.15
console.log(select.cart.tax(exampleState))      // 0.172
console.log(select.cart.total(exampleState))    // { total: 2.322 }
```

You can also select non-leaf nodes, for structured representations:

```javascript
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 } }
```

Override Root Selectors
-----------------------

You can override the default aggregation behavior by defining a custom child
`_`. e.g.:

```javascript
const select = 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 how `select.cart` behaves, instead acting as `select.cart._`:

```javascript
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 } }
```

---
_Source: https://npm.io/package/reselect-tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._