lit-redux

lit-redux is implementation of react-redux API for lit-html library.

Example

import {html, render} from 'lit-html/lib/lit-extended';
import {connect} from 'lit-redux';
import {createStore, bindActionCreators} from 'redux';

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text]);
    default:
      return state;
  }
};

const store = createStore(todos, ['Use Redux']);

const actions = {
  add() {
    return {
      type: 'ADD_TODO',
      text: `Hello ${Math.random()}`
    };
  },
};

const todosView = connect(
  state => ({ todos: state }),
  dispatch => ({ actions: bindActionCreators(actions, dispatch) })
)(({todos, actions}) => html`
  ${ todos.map(text => html`<p>${ text }</p>`) }
  <button type="button" onclick="${ () => actions.add() }">Add</button>
`);
  
render(
  html`${ todosView({ store }) }`,
  document.body
);

Live Demo

Current progress

• Implemented connect() function (only storeKey option is available)

Other related projects

• lit-html - lit-html lets you write HTML templates with JavaScript template literals, and efficiently render and re-render those templates to DOM
• lit-form - Formik API implementation for lit-html library
• lit-todo-example - lit-html + lit-redux + lit-form