dom-repeat not re-rendering after updating state

[rovervannispen]

Hi!

First of all, thanks for this great mixin! I'm currently trying to loop over some items in my Redux Store. The dom-repeat is bound to the routes property like this (I know I can also use static binding, but this way I'm able to console.log the state change). After each update it fires the console.log in the statePath(state) function - with the correct data. However my dom-repeat doesn't update the view.

I can see [[item.properties.name]], I can't see [[item.properties.totalRouteDistance]], [[item.properties.distance]] while they are in the console.log output.

<template is="dom-repeat" items="{{routes}}">
    <div class="filter-row routes-filter">
        <paper-checkbox noink on-checked-changed="_filterClicked" checked="{{item.properties.checked}}"></paper-checkbox>
        <div class="filter-row__meta">
            <span class="title">[[item.properties.name]]</span>
            <span class="subtitle">[[item.properties.distance]]km verderop <br />
                    [[item.properties.totalRouteDistance]]km totale afstand
                </span>
        </div>
        <iron-icon icon="icons:visibility" on-tap="_flyToRoute"></iron-icon>
    </div>
</template>

console.log("Routes updated!");
this.dispatch({
    type: 'UPDATE_ROUTES',
    routes: this.routes
});

Properties in my element

static get properties() {
    return {
        routes: {
            type: Array,
            statePath(state) {
                console.log(state.routes) //just for debug purposes
                return state.routes
            }
        }
    };
}

I also have set up a deep observer to see if the property gets updated. It fires the console.log in the statePath change (see code above) but it DOESN'T fire the deep observer _routesChanged.

static get observers() {
    return [
        '_routesChanged(routes.*)'
    ]
}

_routesChanged(data) {
    console.log(data);
}

Calling the reducer:

console.log("Routes updated!");
this.dispatch({
    type: 'UPDATE_ROUTES',
    routes: this.routes
});

Updating routes reducer:

case 'UPDATE_ROUTES':
return Object.assign({}, state, {
    routes: action.routes
});

Wat could be the solution?

[rovervannispen]

This workaround will fix it.

In your template

 <template is="dom-repeat" items="[[_computeRoutes(routes)]]">
   //element
</template>

In template class

_computeRoutes(routes) {
   if (routes && routes.length > 0) return JSON.parse(JSON.stringify(routes));
}