An example of a smart component.

Todos.jsx

import React, { PureComponent, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { List } from 'immutable';

import TodoItem from './TodoItem';
import TodosForm from './TodosForm';
import todosSelector from './todosSelector';

import * as todoActions from '../../../universal/modules/todo/todoDuck';

const underline = { textDecoration: 'underline' };

class Todos extends PureComponent {
  static propTypes = {
    todos: PropTypes.instanceOf(List).isRequired,
    phase: PropTypes.string.isRequired,
    fetchTodos: PropTypes.func.isRequired,
    createTodo: PropTypes.func.isRequired,
    editTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired,
  };

  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount() {
    const { phase, fetchTodos } = this.props;

    if (phase !== 'success') {
      fetchTodos();
    }
  }

  handleSubmit({ todo }) {
    const { createTodo } = this.props;

    createTodo(todo);
  }

  render() {
    const { todos, editTodo, deleteTodo } = this.props;

    return (
      <div className="Todos">
        <div className="Todos-header">
          <h2>Todos:</h2>
          <span>Displaying {todos.size} todos.</span>
        </div>
        <div className="Todos-list">
          {todos.map((todo, index) => (
            <TodoItem
              key={index}
              todo={todo}
              index={index}
              onEdit={editTodo}
              onDelete={deleteTodo}
            />
          ))}
        </div>
        <div className="Todos-form">
          <TodosForm onSubmit={this.handleSubmit} />
          <div className="Todos-filters">
            <h4>Show:</h4>
            <Link to="/todos" activeStyle={underline}>all</Link>
            <Link to="/todos/active" activeStyle={underline}>active</Link>
            <Link to="/todos/done" activeStyle={underline}>done</Link>
          </div>
        </div>
      </div>
    );
  }
}

export default connect((state, props) => ({
  todos: todosSelector(state, props),
  phase: state.todo.phase,
}), todoActions)(Todos);