17.3.2.3 초기 상태 및 리듀서 함수 만들기

    이제 모듈의 초기 상태와 리듀서 함수를 작성합시다. 이번에는 업데이트 방식이 조금 까다로워집니다. 객체에 한 개 이상의 값이 들어가므로 불변성을 유지해 주어야 하기 때문이죠. spread 연산자()를 잘 활용하여 작성해 보세요. 배열에 변화를 줄 때는 배열 내장 함수를 사용하여 구현하면 됩니다.

    modules/todos.js

    (...)
    const initialState = {
      input: '',
      todos: [
        {
          id: 1,
          text: '리덕스 기초 배우기',
          done: true
        },
        {
          id: 2,
          text: '리액트와 리덕스 사용하기',
          done: false
        }
      ]
    };
    
    function todos(state = initialState, action) {
      switch (action.type) {
        case CHANGE_INPUT:
          return {
            ...state,
            input: action.input
          };
        case INSERT:
          return {
            ...state,
            todos: state.todos.concat(action.todo)
          };
        case TOGGLE:
          return {
            ...state,
            todos: state.todos.map(todo =>
              todo.id = = = action.id ? { ...todo, done: !todo.done } : todo
            )
          };
        case REMOVE:
          return {
            ...state,
            todos: state.todos.filter(todo => todo.id != = action.id)
          };
        default:
          return state;
      }
    }
    
    export default todos;

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