Reselect middleware addresses the issue of using caching mechanisms to reduce rendering stress when state changes during component interactions.

Reselect provides the createSelector API with memory, so let’s see how we create a selector:

let selector = createSelector([fun1, fun2], fun3)
Copy the code

When using selector, treat it as a function, passing state and props as arguments.

Let someState = selector(props) <- mapStateToProps => let someState = (function(props), props) { let state1 = fun1(state, props) let state2 = fun2(state, props) return fun3(state1, state2) })(state, props)Copy the code

This makes it easy to understand when the functions in the parameters passed to createSelector are executed and what the results are used for.

The rule of reselect’s memory function is that if the fun3 argument does not change, then its result does not change and can return the cached result directly. So, for the memory function to work, you have to make sure that the argument to fun3 is the same, in other words, fun1, fun2 is the same, so fun1, fun2 has to be a function that returns a fixed value. This function is even harder than pure function and always returns a value, even if the arguments are different. If fun1’s dependent state changes, the result will change. Fun3 will not return the cache, but recalculate the result and cache the new result, which can be used next time. So, we’re going to be responsive to selector.

Reference: www.tangshuang.net/3839.html