Skip to content

Commit

Permalink
Review docs
Browse files Browse the repository at this point in the history
  • Loading branch information
toomuchdesign authored Jun 21, 2019
1 parent 3422d90 commit e44ce2d
Showing 1 changed file with 64 additions and 36 deletions.
100 changes: 64 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@

Useful to:

- **retain selector's cache** when sequentially **called with one/few different arguments** ([example][example-1])
- **join similar selectors** into one
- **share selectors** with props across multiple component instances (see [reselect example][reselect-sharing-selectors] and [re-reselect solution][example-2])
- **instantiate** selectors **on runtime**
- **Retain selector's cache** when sequentially **called with one/few different arguments** ([example][example-1])
- **Join similar selectors** into one
- **Share selectors** with props across multiple component instances (see [reselect example][reselect-sharing-selectors] and [re-reselect solution][example-2])
- **Instantiate** selectors **on runtime**
- Enhance `reselect` with [custom caching strategies][cache-objects-docs]

<!-- prettier-ignore -->
```js
Expand Down Expand Up @@ -163,11 +164,16 @@ This is what `re-reselect` actually does! :-) It's quite verbose (since has to b

## FAQ

### How do I wrap my existing selector with re-reselect?
<details>
<summary>
<b>How do I wrap my existing selector with re-reselect?</b>
</summary>
<br/>

Given your `reselect` selectors:

<!-- prettier-ignore -->
<!-- prettier-ignore -->

```js
import {createSelector} from 'reselect';

Expand All @@ -181,7 +187,8 @@ export const getMyData = createSelector(

...add `keySelector` in the second function call:

<!-- prettier-ignore -->
<!-- prettier-ignore -->

```js
import createCachedSelector from 're-reselect';

Expand All @@ -201,11 +208,13 @@ Voilà, `getMyData` is ready for use!
const myData = getMyData(state, 'foo', 'bar');
```

### How do I use multiple inputs to set the cacheKey?
</details>

`cacheKey` is the return value of `keySelector`.

`keySelector` receives the same arguments of your `inputSelectors` and (by default) **must return a `string` or `number`.**
<details>
<summary>
<b>How do I use multiple inputs to set the cacheKey?</b>
</summary>
<br/>

A few good examples and [a bonus](https://github.com/toomuchdesign/re-reselect/issues/3):

Expand Down Expand Up @@ -233,19 +242,38 @@ createCachedSelector(
)
```

### How do I limit the cache size?
</details>

<details>
<summary>
<b>How do I limit the cache size?</b>
</summary>
<br/>

Use a `cacheObject` which provides that feature by supplying a [`cacheObject` option](#options).
Use a [`cacheObject`][cache-objects-docs] which provides that feature by supplying a [`cacheObject` option](#options).

You can also write **your own cache strategy**!

### How to share a selector across multiple components while passing in props and retaining memoization?
</details>

<details>
<summary>
<b>How to share a selector across multiple components while passing in props and retaining memoization?</b>
</summary>
<br/>

[This example][example-2] shows how `re-reselect` would solve the scenario described in [reselect docs][reselect-sharing-selectors].
Read more about testing selectors on [`reselect` docs][reselect-test-selectors].

</details>

### How do I test a re-reselect selector?
<details>
<summary>
<b>How do I test a re-reselect selector?</b>
</summary>
<br/>

Just like a normal reselect selector!
Like a normal reselect selector!

`re-reselect` selectors expose the same `reselect` testing methods:

Expand All @@ -268,10 +296,8 @@ Once you get a selector instance you can call [its public methods][reselect-sele
```js
import createCachedSelector from 're-reselect';

export const getMyData = createCachedSelector(
selectorA,
selectorB,
(A, B) => doSomethingWith(A, B)
export const getMyData = createCachedSelector(selectorA, selectorB, (A, B) =>
doSomethingWith(A, B)
)(
(state, arg1) => arg1 // cacheKey
);
Expand All @@ -290,6 +316,8 @@ myFooDataSelector.recomputations();
myFooDataSelector.resetRecomputations();
```

</details>

## API

### createCachedSelector
Expand All @@ -306,7 +334,7 @@ createCachedSelector(
)
```

**createCachedSelector** accepts the same arguments as reselect's [`createSelector`][reselect-create-selector] and returns a new function which accepts **2 arguments**:
Takes the same arguments as reselect's [`createSelector`][reselect-create-selector] and returns a new function which accepts **2 arguments**:

- `keySelector`
- `{ options }` _(optional)_
Expand All @@ -327,40 +355,40 @@ createStructuredCachedSelector(
)
```

**createStructuredCachedSelector** accepts the same arguments as reselect's [`createStructuredSelector`][reselect-create-structured-selector] and returns a new function which accepts **2 arguments**:
Takes the same arguments as reselect's [`createStructuredSelector`][reselect-create-structured-selector] and returns a new function which accepts **2 arguments**:

- `keySelector`
- `{ options }` _(optional)_

**Returns** a [selector instance][selector-instance-docs].

### `keySelector`
### keySelector

`keySelector` is a custom function receiving the same arguments as your selectors (and `inputSelectors`) and **returning a `cacheKey`**.
A custom function receiving the same arguments as your selectors (and `inputSelectors`) and **returning a `cacheKey`**.

`cacheKey` is **by default a `string` or `number`** but can be anything depending on the chosen cache strategy (see [`cacheObject` option](#optionscacheobject)).

The `keySelector` idea comes from [Lodash's .memoize][lodash-memoize].

### `options`

`options` is an optional object with the following properties:
### options

#### `cacheObject`
#### cacheObject

Default: `FlatObjectCache`
Type: `object`<br />
Default: [`FlatObjectCache`][cache-objects-docs]

An optional custom **cache strategy object** to handle the caching behaviour.
An optional custom **cache strategy object** to handle the caching behaviour. Read more about [re-reselect's custom cache here][cache-objects-docs].

Read more about [re-reselect's custom cache here](cache-objects-docs).
#### selectorCreator

#### `selectorCreator`
Type: `function`<br />
Default: `reselect`'s [`createSelector`][reselect-create-selector]

An optional function describing a [custom selectors][reselect-create-selector-creator]. By default it uses `reselect`'s `createSelector`.
An optional function describing a [custom version of createSelector][reselect-create-selector-creator].

### Selector instance
### re-reselect selector instance

A selector function providing the same API as a **standard reselect selectors**.
`createCachedSelector` and `createStructuredCachedSelector` return a **selector instance** which extends the API of a **standard reselect selector**.

> The followings are advanced methods and you won't need them for basic usage!
Expand Down Expand Up @@ -446,6 +474,6 @@ Thanks to you all ([emoji key][docs-all-contributors]):
[example-1]: examples/1-join-selectors.md
[example-2]: examples/2-avoid-selector-factories.md
[example-3]: examples/3-cache-api-calls.md
[selector-instance-docs]: #selector-instance
[selector-instance-docs]: #re-reselect-selector-instance
[cache-objects-docs]: src/cache#readme
[docs-all-contributors]: https://github.com/kentcdodds/all-contributors#emoji-key

0 comments on commit e44ce2d

Please sign in to comment.