Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pass properties to reselect selector in statePath #126

Open
TimPietrusky opened this issue Jan 29, 2018 · 3 comments
Open

Pass properties to reselect selector in statePath #126

TimPietrusky opened this issue Jan 29, 2018 · 3 comments

Comments

@TimPietrusky
Copy link

TimPietrusky commented Jan 29, 2018

I'm using reselect to create a selector and use that selector in my component as the statePath. This is working fine when I can access all my data in the state.

But what if I want to use some properties from the component that need to be passed into the selector, so that it can select a specific element from the state (when the state is an array of objects and I need to select the data of a specific element in the array).

According to the documentation for reselect, you can access properties in selectors by passing them into the selector, but how can this be achieved when using the selector as the statePath?

Additional info

I'm on the https://github.com/tur-nr/polymer-redux/tree/polymer-3 branch

@TimPietrusky
Copy link
Author

TimPietrusky commented Jan 30, 2018

So what I tried instead was overwriting the statePath like this:

class TimelineScene extends ReduxMixin(PolymerElement) {
  static get properties() {
    return {
      scene: Object,
      sceneAnimations: {
        type: Array,
        statePath(state) {
          // getAnimations is a selector
          return getAnimations(state).filter(animation => {
            return this.scene.animations.includes(animation.id)
          })
        }
      }
    }
  }

That works, but also gets executed every time something in the state is changing (and that might be something completely different than the data I access here). So doing it like this is too expensive in terms of performance.

@tur-nr
Copy link
Owner

tur-nr commented Jan 31, 2018

Hey, yes it would be a nice addition to pass the properties to reselect. So let's discuss implementation;

// ./polymer-redux.js

function compileProps(element, properties) {
    return Object.keys(properties).reduce((props, name) => Object.assign(props, {
        [name]: element[name],
    }), {});
}

// ...

const props = compileProps(element, properties);
const value = (typeof statePath === 'function') ?
    statePath.call(element, state, props) :
    get(state, statePath);

Thoughts?

@TimPietrusky
Copy link
Author

TimPietrusky commented Feb 5, 2018

This looks good to me right now and I the only "side effect" I can think of would be, that also every property that is created out of the statePath would be part of props. I'm happy to test this!

Update 1

I added your implementation to my local polymer-redux.js and now I fully understand why we need the compileProps, because that is giving us the actual value of every property and not the function.

Update 2

When using the compileProps in my project I get a performance problem, but I guess this is not the problem of polymer-redux, but how I use Polymer and Redux in my render loop. I will work on improving the performance in the render loop to give you a better result on general performance issues.

Update 3

I'm using reselect now as asked in my initial comment and it's working: I can access & use the properties of the component.

Update 4

I still have the same "problem" as in #126 (comment): When having more than 1 element in the selector, the statePath gets updated over and over again, even when no property is changing. But again: This could also happen because of how I use Polymer and Redux in combination.

TimPietrusky added a commit to NERDDISCO/polymer-redux that referenced this issue Feb 15, 2018
In order to use properties in reselect, we need to pass them into the statePath.

Implements tur-nr#126
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants