As a developer, I would like a redux example

[hutchgrant]

Type of Change

• [ ] New Feature Request
• [x] Documentation
• [ ] Future Spec
• [x] Improvement / Suggestion
• [ ] Bug
• [ ] Other (please clarify below)

Summary

Developers such as myself would like to know how to use libraries like redux within lit-element components. A working example and a wiki guide would be great to have.

The pwa-starter-kit has a really nice guide.

Use Case

Managing state across components necessitates the use of a central store, hence why a redux based example would be something that developers would find useful.

Code Sample

import { html, LitElement } from '@polymer/lit-element';
import { store } from '../../store.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
import { getPosts } from '../../actions/app.js';

class PostList extends connect(store)(LitElement) {
  static get properties() {
    return {
      posts: Array,
    };
  }

  render() {
    return this.posts && html`
    <ul>
      ${this.posts.map(post => html`
        <li>
          <h1>{post.title}</h1>
        </li>
      `)}
    </ul>
    `;
  }

  constructor() {
    super();
    store.dispatch(getPosts());
  }

  // This is called every time something is updated in the store.
  stateChanged(state) {
    this.posts = state.app.posts;
    console.log('My Posts!', this.posts);
  }
}

customElements.define('post-list', PostList);

See blog-redux-example branch for entire example