[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[4]

1.  todos 모듈 만들기

 

이번에는 modules 디렉토리에 todos.js 파일을 생성합니다.

 

1.1 액션 타입 정의 하기

 

아래의 액션 타입을 먼저 정의합니다.

 

 

- modules/todos.js

 

// 액션의 타입 정의
const INCREASE = 'counter/INCREASE';
const DECREASE = "counter/DECREASE";

// 액션 생성함수 생성
export const increase = () => ({ type : INCREASE });
export const decrease = () => ({ type : DECREASE });

 

 

1.2 액션 생성 함수 만들기

 

액션 생성 함수를 만듭어 줍니다.

이전과 달리 이번에는 액션 생성함수에서 전달 받을 파리미터가 필요합니다.

따라서 전덜받은 파라미터를 액션 객체 안에 추가 필드로 들어가게 작성해 줍니다.

 

 

- modules/todos.js

 

insert 함수는 액션 객체를 생성할 때 파라미터 외에 사전에 이미 선언되어 있는 id 값을 의존합니다.

해당 액션 생성함수는 호출될 때마다 id값에 1씩 더해 줍니다.

id 값은 각 todo 객체 고유값으로 사용됩니다.

 

id 값이 3인 이유는 사전에 todo 객체를 2개를 미리 만들어서 작성할 예정이기 때문입니다.

 

const CHANGE_INPUT = "todos/CHANGE_INPUT"; // 인풋 값 변경
const INSERT = "todos/INSERT"; // 새로운 todo 등록
const TOGGLE = "todos/TOGGLE"; // todo 체크박스 체크/체크 해제
const REMOVE = "todos/REMOVE"; // todo 삭제

export const changeInput = input => ({
    type: CHANGE_INPUT,
    input
});

let id = 3; // insert 호출시 1씩 증가
export const insert = text => ({
    type: INSERT,
    todo: {
        id: id++,
        text,
        done: false
    }
});

export const toggle = id => ({
    type: TOGGLE,
    id
});

export const remove = id => ({
    type: REMOVE,
    id
});

 

 

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

 

아제 모듈의 초기 상태값과 리듀서 함수를 작성합니다.

이번에는 객체 한개 이사의 값이 들어가기 때문에 불변성 유지가 필요합니다.

따라서 spread 연산자를 사용하여 리듀서 함수를 작성합니다.

 

배열에 변화를 주려면 배열 내장함수를 사용하여 구현할 수 있습니다.

 

 

- modules/todos.js

 

 

const CHANGE_INPUT = "todos/CHANGE_INPUT"; // 인풋 값 변경
const INSERT = "todos/INSERT"; // 새로운 todo 등록
const TOGGLE = "todos/TOGGLE"; // todo 체크박스 체크/체크 해제
const REMOVE = "todos/REMOVE"; // todo 삭제

export const changeInput = input => ({
    type: CHANGE_INPUT,
    input
});

let id = 3; // insert 호출시 1씩 증가
export const insert = text => ({
    type: INSERT,
    todo: {
        id: id++,
        text,
        done: false
    }
});

export const toggle = id => ({
    type: TOGGLE,
    id
});

export const remove = id => ({
    type: REMOVE,
    id
});

const initalState = {
    input: '',
    todos: [
        {
            id: 1,
            text: '리덕스 기초 학습',
            done: true
        },
        {
            id: 2,
            text: '리엑트와 리덕스 사용',
            done: false
        }        
    ]
};

function todos(state = initalState, 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;

 

 

1.4 루트 리듀서 만들기

이전 프로젝트에서는 리듀서를 여러개 만들어서 사용했습니다.

createStore 함수를 사용하여 스토어를 만들떄는 리듀서를 하나만 사용해야 합니다.

따라서 기존에 만들었던 리듀서를 하나로 합치는 작업이 필요합니다.

 

이 작업은 리덕스가 제공하는 combineReducers 유틸 함수를 사용하여 처리합니다.

 

modules 디렉토리에 index.js 파일을 만들고 다음 코드를 작성합니다.

 

 

- modules/index.js

 

import { combineReducers } from "redux";
import counter from "./counter";
import todos from "./todos"

// 루트 리듀서 작성(리듀서 합치기)
const rootReducer = combineReducers({
    counter,
    todos,
});

export default rootReducer

 

파일 이름을 index.js로 작성하는 것으로 나중에 불러올 떄 디렉토리 이름까지 입력하여 불러올 수 있습니다.

 

 

import rootReducer from "./modules"