todo-redux-example.js

import React, { Component } from 'react';
import { createStore } from 'redux'
import { render } from 'react-dom';
import './style.css';

const defaultState = { checked: false }
const reducer = (state = defaultState, action) => {
  switch(action.type) {
    case 'TOGGLE':
      return { ...state, checked: !state.checked };
  }
  return state;
}

const store = createStore(reducer);

class App extends Component {
  constructor() {
    super();
    this.state = {};
  }

  componentWillMount() {
    store.subscribe(() => this.setState(store.getState()))
  }

  render() {
    const handleClick = () => store.dispatch({type: 'TOGGLE'})
    return (
      <div>
        <h1>To-dos</h1>
        <div>
          Redux&nbsp;
          <input
            type="checkbox"
            checked={!!this.state.checked} 
            onClick={handleClick}/>
        </div>
        {
          this.state.checked ? (<h2>Checked!</h2>) : null
        }
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));