TypeScript - 리덕스 미들웨어 사용하기

리덕스 모듈 여러 파일로 분리하기

index.ts 파일을 여러 파일로 분리한 것이다.

//'./todos/actions.ts'
import {createAction} from 'typesafe-actions'

export const ADD_TODO = 'todos/ADD_TODO' as const;
export const TOGGLE_TODO = 'todos/TOGGLE_TODO' as const;
export const REMOVE_TODO = 'todos/REMOVE_TODO' as const;

let nextId = 1;

export const addTodo = (text: string) => ({
    type: ADD_TODO,
    payload: {
        id: nextId++,
        text
    }
});

export const toggleTodo = createAction(TOGGLE_TODO)<number>();
export const removeTodo = createAction(REMOVE_TODO)<number>();

//'./todos/index.ts'
export { default } from './reducer';
//default를 내보내겠다는 의미이고, 아래는 actions의 모든 코드를 내보내겠다는 것이다.
export * from './actions';
export * from './types';

//'./todos/reducer.ts'
import {createReducer} from 'typesafe-actions';
import { ADD_TODO, REMOVE_TODO, TOGGLE_TODO } from './actions';
import { TodosAction, TodosState } from './types';

const initialState: TodosState = [];

const todos =createReducer<TodosState, TodosAction> (initialState, {
    [ADD_TODO]: (state, action) => state.concat({
        ...action.payload,
        done:false
    }),
    [TOGGLE_TODO]: (state, action) => state.map(
        todo => todo.id === action.payload
        ? {...todo, done: !todo.done}
        : todo
    ),
    [REMOVE_TODO]: (state, action) => state.filter(
        todo => todo.id !== action.payload
    )    
})

export default todos;

//'./todos/types.ts'
import {ActionType} from 'typesafe-actions';
import * as actions from './actions'

export type TodosAction = ActionType<typeof actions>;

export type Todo = {
    id: number;
    text: string;
    done: boolean;
}

export type TodosState = Todo [];

원래 전에 작성한 todos.ts 파일을 todos 폴더안에 index.ts이름으로 바꿔서 넣고나서 위와같이 파일을 여러 파일로 분리한 것이다. 하나의 디렉토리에 몰아서 하는 방법이다.

위와 같이 파일이 많아질 때 파일을 나누면 유지보수 할 때 편해진다.