Howto: Use reselect at component-level without connect about reselect HOT 5 CLOSED

@TN1ck I don't understand how this code works. Won't appliedSelectors just be an array of the results of running the passed-passed in selectors? Something like: [2, 'cool val', {}]. So when you run _.merge(...appliedSelectors) you're going to get garbage out:

{ [Number: 2]
  '0': 'c',
  '1': 'o',
  '2': 'o',
  '3': 'l',
  '4': ' ',
  '5': 'v',
  '6': 'a',
  '7': 'l' }

from reselect.

Thanks @TN1ck. I think to be more consistent with (state, props) it should be

let appliedSelectors = selectors.map(fn => {
  return fn(_, this.props);
})

from reselect.

Also here is a version with ES6 classes:

import React, { Component } from 'react'
import _ from 'lodash'

const select = (...selectors) => {
  return WrappedComponent => class extends Component {
    render() {
      const appliedSelectors = selectors.map(fn => {
        return fn(_, this.props)
      })
      const calculatedProps = _.merge(...appliedSelectors)
      return (
        <WrappedComponent {...this.props} {...calculatedProps} />
      )
    }
  }
}

export default select

// Usage:
// select(avatarSelector)(AvatarComponent)

from reselect.

@TN1ck @panayi Great, I appreciate both of you writing this up! Thanks.

@panayi Looks like you are passing lodash as the 1st param into the function getting memoized? I guess that was intended to be a placeholder. I'm not sure that I agree about (_, props) being more consistent, my initial feeling is that I would leave that function call how @TN1ck had it.

This would be a good fit for this FAQ question on the readme if anyone fancies submitting a pull request. No worries if not, I'll get around to adding it soon.

from reselect.

@TN1ck Sorry, I'm not following what the purpose of this is. Do you have a more concrete example and an explanation of why you can't use reselect in the normal way?

Thanks.

from reselect.