## Repere, the replacement of reselect

stayWhy do we need reselectWe expound the necessity of reselect.

Briefly review:

```
class UnusedComp extends Component {
render() {
const { a, b, c, fab, hbc, gac, uabc } = this.props
return (
<div>
<h6>{a}</h6>
<h6>{b}</h6>
<h6>{c}</h6>
<h6>{fab}</h6>
<h6>{hbc}</h6>
<h6>{gac}</h6>
<h6>{uabc}</h6>
</div>
)
}
}
```

Where Fab = f (a, b), HBC = H (B, c), GAC = g (a, c), uabc = u (a, B, c). For such a component, we only need to store states a, B, C. for Fab, HBC, GAC, uabc, which can be derived completely from the existing state, it is called “derived attribute“. We should only store the state of the minimum set, which is convenient for us to update the state and ensure the correctness of the data layer.

As wellWhy do we need reselectIt is pointed out that it is easy to bring meaningless function execution. The solution is as follows:

```
//
//
import { createSelector } from 'reselect'
import { f, h, g, u } from './xx'
fSelector = createSelector(
a => state.a,
b => state.b,
(a, b) => f(a, b)
)
hSelector = createSelector(
b => state.b,
c => state.c,
(b, c) => h(b, c)
)
gSelector = createSelector(
a => state.a,
c => state.c,
(a, c) => g(a, c)
)
uSelector = createSelector(
a => state.a,
b => state.b,
c => state.c,
(a, b, c) => u(a, b, c)
)
...
function mapStateToProps(state) {
const { a, b, c } = state
return {
a,
b,
c,
fab: fSelector(state),
hbc: hSelector(state),
gac: gSelector(state),
uabc: uSelector(state)
}
}
```

#### Easy…

Those who have used mobx won’t forget the simplicity of @ compute. Is there a simple alternative to relct in Redux?`Derivation`

Attributes can be derived from basic attributes, and the same basic attribute must derive the same value.

For example, Fab = f (a, b). As long as a and B are the same, then Fab must be the same. Based on this, we can have:

```
function x(func) {
let oldargs = []
let oldresult = null
return function(...args) {
if(equal(oldargs, args)) { // equal?
return oldresult
}
oldargs = args
oldresult = func(...args)
return oldresult
}
}
/// now we use
function f(a, b) {
...
}
export const xf = x(f)
```

Function x gives the memory function of derivative function, just like reselect, but it is much more convenient to write.

Thanks to Redux in`equal(oldargs, args)`

We can directly use = = = to compare the parameters

#### repure

It can be said that the function x is a simplified versionrepure。 GitHub address

##### API

Repure provides three methods: repure creator (cachesize, equality check), repure, repurenone cache creator (equality check)

###### repureCreator(cacheSize, equalityCheck)

The function repurecreator returns a repure, which can cache cachesize results. Use equality check when judging whether the input parameters are the same.

The default equality check is:

```
function defaultEqualityCheck(a, b) {
return a === b
}
```

In addition, we provide a shallowequal:`import { shallowEqual } from 'repure'`

###### repure

Most of the time, you should use this method. This is the same as you usereselctThe effect of the create selector is the same, using the`===`

Compare equal, cachesize is 1.

Repure accepts a**pure function**To return the cached version of this method

###### repureOneCacheCreator(equalityCheck)

Optimized version of repurecreator when cachesize = 1

In addition, a batchrepure (obj, repure) method is provided. It can be reproduced in batches.

#### end

An example of repure rewriting the beginning

Install first`npm install repure --save`

```
import repure, { batchRepure } from 'repure'
import * as allfunc from './xx'
const { f, h, g, u } = batchRepure(allfunc, repure)
...
function mapStateToProps(state) {
const { a, b, c } = state
return {
a,
b,
c,
fab: f(a, b),
hbc: h(b, c),
gac: g(a, c),
uabc: u(a, b, c)
}
}
```