CODEWITHSUNDEEP
javascriptreact-reduxreselect
DSCH
DSCH

Reputation: 2366

Reselect reused selector unexpected behaivor

The context is a React app with reselect and redux, however my problem might just be 'pure' JS. My problem is that I can't understand why I can't reuse a selector.

I have a selector X. In addition, I have a makeGetX as follows:

const X = createSelector( [...], (// checks for a specific flag and manipulates)=> x );
const makeGetX = () => X;

Some of my components simply use X and some the maker. Before that I used to only have maker with the X definition:

const makeGetX = () => createSelector( [...], (// checks for a specific flag and manipulates)=> x );

The former worked great whenever the specific aforementioned feature was used. Refactoring it as shown in the first snippet breaks (infinite updates) it whenever I use the maker.

The context of use is I have multiple components using a makeMapStateToProps and within it

...
const getX = makeGetX()
...
return (state,ownProps) => ({..., X: getX(state, ownProps), ...});

And in my connect function I call makeMapStateToProps.

For now I solved it by duplicating the code :( in both definitions.

Would appreciate any insight or explanation. Thanks!

Upvotes: 0

Views: 124

Answers (1)

Ivan Burnaev
Ivan Burnaev

Reputation: 2730

Well, I guess you are calling createSelector internally multiple times.
So it returns you different function objects which has a dedicated memo storage inside of it.
That's why shallow check fails (connect is doing simple shallow-equal check under the hood).

Upvotes: 1

Related Questions