Repere, the replacement of reselect

Time:2021-3-8

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?
DerivationAttributes 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 inequal(oldargs, args)We can directly use = = = to compare the parameters

repure

It can be said that the function x is a simplified versionrepureGitHub 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 apure functionTo 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 firstnpm 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)
    }
}