17.5.2 TodosContainer 만들기

    이번에는 Todos 컴포넌트를 위한 컨테이너인 TodosContainer를 작성해 보겠습니다. CounterContainer를 만들 때 배웠던 connect 함수를 사용하고, mapDispatchToProps를 짧고 간단하게 쓰는 방법을 적용해서 코드를 작성해 보세요.

    containers/TodosContainer.js

    import React from 'react';
    import { connect } from 'react-redux';
    import { changeInput, insert, toggle, remove } from '../modules/todos';
    import Todos from '../components/Todos';
    
    const TodosContainer = ({
      input,
      todos,
      changeInput,
      insert,
      toggle,
      remove,
    }) => {
      return (
        <Todos
          input={input}
          todos={todos}
          onChangeInput={changeInput}
          onInsert={insert}
          onToggle={toggle}
          onRemove={remove}
        />
      );
    };
    
    export default connect(
      // 비구조화 할당을 통해 todos 분리하여
      // state.todos.input 대신 todos.input 사용
      ({ todos }) => ({
        input: todos.input,
        todos: todos.todos,
      }),
      {
        changeInput,
        insert,
        toggle,
        remove,
      },
    )(TodosContainer);

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.