23. Extracting Container Components (VisibleTodoList, AddTodo)

Video Link

Now let's work with the TodoList component. We want to keep it as a presentational component, but we want to encapsulate reading the currently visible todos into a separate container component that connects the TodoList to the Redux store.

This component will be called VisibleTodoList. Just like when we created the FilterLink component, the data for VisibleTodoList will be calculated by using the current state. We will use the getVisibleTodos() function to go through all of the todos in the Redux store and determine which ones should be shown according to the visibilityFilter.

We also will specify the behavior of onTodoClick() to dispatch an action of type 'TOGGLE_TODO' along with the id.

The same subscription logic we used in our FilterLink component needs to be included as well.

class VisibleTodoList extends Component {
  componentDidMount() {
    this.unsubscribe = store.subscribe(() =>

  componentWillUnmount() {

  render() {
    const props = this.props;
    const state = store.getState();

    return (
        onTodoClick={id =>
            type: 'TOGGLE_TODO',

Remember, the job of all container components is similar-- connect a presentational component to the Redux store, and specify the data and behavior that it needs.

Now we can replace TodoList in our TodoApp with our newly created VisibleTodoList.

Changing AddTodo to a Container

In the last section we made AddTodo into a presentational component. Now we will backtrack on this.

We start by moving the onClick handler from TodoApp into the AddTodo component. We're doing this because there isn't a lot of presentaion or behavior here, and it's easier to keep them together until we figure out how to split the presentation from the behavior. For example, in the future we may decide to have a Form component

const AddTodo = () => {
  let input;

  return (
      <input ref={node => {
        input = node;
      }} />
      <button onClick={() => {
            type: 'ADD_TODO',
            id: nextTodoId++,
            text: input.value
        input.value = '';
        Add Todo

Refactored TodoApp

Now that we've refactored our components, it's become clear that none of the containers need props from TodoApp! We can also get rid of TodoApp's render() function that rendered the current state of the store.

We can get rid of the render() function because the container components inside of TodoApp are now set up to get state and update themselves as needed, therefore, we only need to render TodoApp once on initialization.

const TodoApp = () => (
    <AddTodo />
    <VisibleTodoList />
    <Footer />

// Note this render does not belong to `TodoApp`
  <TodoApp />,

Recap of Data Flow

3:33 in the video

results matching ""

    No results matching ""