Collection for Redux todo example - This file is the "smart" container component. It is aware of the application's state and can fire actions to update state, using the actionCreators. The container subscribes to the store, updating its own state and the props of its children whenever the store's state changes.

App.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './actions';
import Input from './Input';
import List from './List';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.onAddTodo = this.onAddTodo.bind(this);
    this.onRemoveTodo = this.onRemoveTodo.bind(this);
  }

  componentWillMount() {
    const { store } = this.props;
    const { todos } = store.getState();
    this.setState({ todos });

    this.unsubscribe = store.subscribe(() => {
      const { todos } = store.getState();
      this.setState({ todos });
    });
  }

  componentWillUnMount() {
    this.unsubscribe();
  }

  onAddTodo(text) {
    const { store } = this.props;
    store.dispatch(actionCreators.addTodo(text));
  }

  onRemoveTodo(index) {
    const { store } = this.props;
    store.dispatch(actionCreators.removeTodo(index));
  }

  render() {
    const { todos } = this.state;

    return (
      <div>
        <h1>Todo List</h1>
        <Input
          placeholder={'Add a todo'}
          handleSubmit={this.onAddTodo}
        />
        <List
          list={todos}
          onClickItem={this.onRemoveTodo}
        />
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  todos: state.todos,
})

export default connect(mapStateToProps)(App);