titouancreach / vuejs-redux

Flexible binding between Vue and Redux
57 stars 11 forks source link

store.subscribe() is faster than vuejs re-rendering and cause bad props. #10

Closed titouancreach closed 6 years ago

titouancreach commented 6 years ago

Imagine a store

{
  foo: {
    byId: {0: 'foo'},
    allIds: [0]
  }
}

and the component Foo:

<OtherComponent>
  {getFooAllIds().map(fooId => (
    <Foo id={fooid} />
  )}
</OtherComponent>

If a "foo" is deleted from the store, <Foo id={0} /> is still here until the rerendering. It cause this component to be wrong during some milliseconds.

titouancreach commented 6 years ago

It happens because when the store is updated we call:

this.state = mapStateToProps(this.store.getState());

if mapStateToProps has for example something like:

const mapStateToProps = props => state => ({
  foo: getFooById(props.id)
});

getFooById will fail since props.id is still 0 until re-rendering.

The solution is to call mapStateToProps during rerendering.