Using component prop inside function body of reselect? - reactjs

Question

Honestly, after hours of research, I totally don't understand reselect, so I just ask why I need it, and if it can help.
Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
It's a bit unclear, what do we mean as argument here, but I assume that not the redux state, because otherwise there wouldn't be any point in reselect.
My goal is to not calculate the whole list every time something happens, because it can contain thousands of elements.
First question is that if for an example the value of state["2"] changes to 4 for an example, it will run through the whole list?
//for an example, in the next list, the key is the child,
//and the value is it's parent
const state = {
1: 5,
2: 5,
3: 2,
4: 1,
5: 10,
//...
1000: 342
};
//and we have to find all children of a specific element,
//what we get from the component's own props
const getState = (
state,
props //okay, I can access it here
) => state;
const getChildren = createSelector(
[getState],
state => Object.keys(state).filter(child => {
const parent = state[child];
return parent === props.id //but I need it here
})
);
const mapStateToProps = (state, props) = ({ children: getChildren(state, props) });
And the main question: how can I access the props inside the function body?

Answer 1

You can pass the props argument directly to the other selector getChildren and you don't need the first getState like this:
const getChildren = createSelector(
[
state => state,
props => props
], (state, props) => {...}
About clarifying the use cases for reselect:
it does recompute if the state or the props changes (any argument indeed). So why using it? I use it for 2 reasons
you can combine parts of state coming from multiple reducers and build up what we can call a 'meta-reducer' and pass that to your component. In that way you place that code only in one place (the selector) and you can reuse it across different components. Imagine each reducer like a database table and the selector like a query result. You can query anything from your state and you want to keep the result cached for performance.
instead of running this logic on the mapStateToProps which is run every time that a component renders (no matter if the state has changed), you run it only 1 time per state change and you get the cached version if the component rerenders. This happens for example if a child component renders only because its parent rendered but the state portion related to its selector didn't change. So I like to use selectors all the times instead of accessing the redux state directly.

Answer 2

Here's the typical flow.
You'll have some ConnectedComponent that's hooked into connect, and its mapStateToProps calls out to a selector with both state and ownProps.
You have individual selectors for both the getting of id off of props and your objects from state.
Using ConnectedComponent
<span>
<ConnectedComponent id="123" />
</span>
mapStateToProps (ConnectedComponent)
import {connect} from 'react-redux'
import {getMyObjectSelector} from './selectors';
const mapStateToProps = (state, ownProps) => ({
myObject: getMyObjectSelector(state, ownProps)
});
export default connect(mapStateToProps)(Component)
selectors
const getIdFromProps = (state, props) => props.id
const getMyObjectsFromState= state => state.myObjects;
export getMyObjectSelector = createSelector(
getMyObjectsFromState,
getIdFromProps,
(objects, id) => objects[id]
);
Component
export const Component = ({myObject}) => (
<span>
// Do stuff
</span>
)