Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance

[markerikson]

Original author: Shaun Michael Stone @shaunmichaelstone
Original date: 2017-12-23T23:00:50Z

Good article!

[markerikson]

Original author: Einar Paul Qvale @einarpaulqvale
Original date: 2017-12-24T10:19:24Z

Great article. Personally find that inadvertent renders due to returning new refs from selectors (using map/filter/reduce, or spread operator) is probably a good enough reason to use reselect in itself, at least I’ve seen that mistake made a lot (and made it myself).

One question. As you say it’s common to co-locate selectors with the reducer that it selects from, but where would you recommend placing a selector that has input selectors from different slices of the store? Perhaps just a “selectors” file that imports the different input selectors from the different reducers?

[markerikson]

Original date: 2017-12-24T16:36:28Z

I'm generally not concerned with trying to make my feature folders totally encapsulated from interacting with other parts of the codebase. I mostly just want to easily know where I can find a given piece of code. If a reducer or selector needs to reference an action type or slice of state that "belongs" to another feature, I'm fine with that.

Your mileage may vary on that, of course. If you _are_ trying to keep your app's features more encapsulated, then a dependency injection type approach may be more useful. See Randy Coulman's posts on "globalizing selectors" that I linked at the end of the post for some good suggestions.

[markerikson]

Original author: Einar Paul Qvale @einarpaulqvale
Original date: 2017-12-24T16:43:55Z

I’ll take a look, thanks!

[markerikson]

Original author: Cliff Stamp @cliff_stamp
Original date: 2018-01-10T04:18:54Z

Is it possible to connect reselect'ers (from createSelector) to the actual state so it is essentially a getter function on the state?

[markerikson]

Original date: 2018-01-10T04:38:03Z

Not out of the box with Reselect, no. Selectors are built with the assumption that you're passing in the current state tree as a parameter.

I _have_ seen a couple libs that claim to let you add selectors to the store itself or embedded in the state tree. You might take a look to see of any of them are close to what you want:

- https://github.com/luwes/re...
- https://github.com/guillaum...
- https://github.com/blgm/red...

[markerikson]

Original author: pavan kumar @pavanear
Original date: 2018-08-02T17:17:38Z

good article

https://goo.gl/uPXUUh

[markerikson]

Original author: Wama Software @reactnativedevelopment
Original date: 2018-11-22T06:41:40Z

Good Post ! I really bookmark this article..Thanks for sharing.

Hire Angularjs Developer

[markerikson]

Original author: Bruce Wang @brucewar89
Original date: 2019-08-14T08:49:54Z

Nice

[markerikson]

Original author: 김창현
Original date: 2019-08-16T06:28:04Z

love it

[markerikson]

Original author: Ahmed Ayed
Original date: 2019-08-29T21:15:29Z

Very good article, thanks.

[markerikson]

Original author: Cheng Qiu @chengqiu
Original date: 2020-02-16T11:33:54Z

I have one doubt,

selectFilteredSortedTransformedData only recalculates if its unique parameter "state" changes, however, the change of "state.someData" does not change "state" at all, which results in selectFilteredSortedTransformedData giving the same cached value.

Here is my justification
```
const reselect = require('reselect');

let state = {
a: {
b: 10,
},
c: 12,
};

const state1 = state => {
console.log("calculate state1");
return state.a.b;
};
const state2 = state => {
console.log("calculate state2");
return state.c;
};

const getResult = reselect.createSelector(
state1,
state2,
function (result1, result2) {
console.log("aggregate");
return result1 + result2;
}
);

console.log(getResult(state));
// should not cause any recalculation
state.c = 123;
console.log(getResult(state));

//state has changed, causing recalculation
state = {...state};
console.log(getResult(state));

```

I think the true reason why it works in redux is because "combineReducers" returns a brand new state object every time any action got dispatched.

[markerikson]

Original date: 2020-02-16T16:58:35Z

I think you're misunderstanding how Reselect works.

It doesn't matter if the top `state` parameter has changed. What matters is if any of the values returned by the "input selectors" have changed.

[markerikson]

Original author: yanlee26 @yanfrank
Original date: 2020-07-10T05:39:02Z

112

[markerikson]

Original author: Gourav Bajaj @gouravbajaj
Original date: 2020-08-23T07:59:34Z

Great Post! Very Useful piece of code for those who are new in coding! Thanks for sharing..
Thanks and Regards
Gourav Bajaj
Works at Website Development Company

[markerikson]

Original author: Gourav Bajaj @gouravbajaj
Original date: 2020-08-23T09:11:02Z

Loved it!. Very Well Written and informative post for those who are new in development.
Thanks and Regards
Gourav Bajaj Works at SAM Web Studio

[markerikson]

Original author: Gourav Bajaj @gouravbajaj
Original date: 2020-08-23T09:11:31Z

Loved it!. Very Well Written and informative post for those who are new in development.
Thanks and Regards
Gourav Bajaj Works at SAM Web Studio

[markerikson]

Original author: ممدلی شوخ
Original date: 2020-10-02T12:05:55Z

I read your article and worked in my project but I can't fetch data from server.
can you see the code please? it is in stackoverflow.
code link