Using Reselect in react-redux 0.5+ @connect decorator

[jvanleeuwen]

Hi all,
In react-redux new @connect API we don't have access to the (parent) props, which resembles Reselect's API.
To further filter state with props as parameters@connect allows to take control over the merging of props in it's third parameter 'mergeProps'. https://github.com/gaearon/react-redux#arguments and also see this PR from @jhollingworth: reduxjs/react-redux#36

Is the mergeProps function also a good place to make use of the composing/memoizing properties of Reselect?

As (pseudo) example:

export const dataSelectorFactory = (path) => {
    return immutableCreateSelector(
        [state => state],
        data => {
            return { value: data.getIn(path) };
        }
    );
};

@connect(
    state => state.data,
    null,
    (mergeProps, dispatchProps, parentProps) => {
        return { dataSelectorFactory(parentProps.path)(mergeProps), ...parentProps }
    }
)
class User extends Component {
   ...
}

Or am I overthinking this and is there no use-case for Reselect here?
Thanks in advance!!

[ellbee]

Hey @jvanleeuwen, sorry it took a while to get back to you, I am on holiday with no laptop(!). I think I see what you are trying to do, but it looks like your factory function is returning a new selector each time so you won't get the memoization benefit?

[PSpSynedra]

@jvanleeuwen, See reduxjs/react-redux#52 (comment) and reduxjs/react-redux#59 (comment). I think this direclty adresses your issue here. Also what ellbee said is correct. You will not get any memoization when creating a new selector every time you select the data from the state. Create the selector once and use it whenever needed.

As soon as reduxjs/react-redux#59 (comment) is merged, you could pass the created selector as part of the props of your component and use it in the mapsStateToProps function to select the memoized result of your selector.

[jvanleeuwen]

@ellbee Thanks for reacting while on vacation ;)
@PSpSynedra @ellbee

Both you guys are correct. My example code was terrible ;)
I eventually solved my use-case with a HOC which I pass props and returns a mapStateToProps > Reselect based on these passed props.

Your idea of passing a selector in Props is pretty interesting. I will try that today

[PSpSynedra]

@jvanleeuwen, You are absolutely correct. I was completely ignorant to the parent prefix of the props parameter passed to the mergeProps function. The documentation does also make that pretty clear, sorry for the confusion.

[jvanleeuwen]

Not a single problem, thanks for helping. This can be closed :)