Split into multiple files

src/modules/todos/actions.ts

@@ -0,0 +1,27 @@
+import { createAction, createStandardAction } from 'typesafe-actions';
+
+// 리듀서에서 사용 할 수 있도록 타입도 내보내줍니다.
+export const ADD_TODO = 'todos/ADD_TODO';
+export const TOGGLE_TODO = 'todos/TOGGLE_TODO';
+export const REMOVE_TODO = 'todos/REMOVE_TODO';
+
+let nextId = 1; // 새로운 항목을 추가 할 때 사용 할 고유 ID 값
+
+// 액션 생성 함수
+
+// 이 액션 생성 함수의 경우엔 파라미터를 기반하여 커스터마이징된 payload를 설정해주므로,
+// createAction 이라는 함수를 사용합니다.
+// 여기서 action은 액션 객체를 만드는 함수입니다
+export const addTodo = createAction(ADD_TODO, action => (text: string) =>
+  action({
+    id: nextId++,
+    text
+  })
+);
+// 위 코드는 다음과 같은 형태로도 구현 할 수 있지만, createAction 말고 action 만 사용하면
+// Action Helpers (https://www.npmjs.com/package/typesafe-actions#action-helpers-api) 지원이 안됩니다.
+// export const addTodo = (text: string) => action(ADD_TODO, { id: nextId++, text })
+
+// payload가 그대로 들어가는 액션생성함수는 정말 간단합니다.
+export const toggleTodo = createStandardAction(TOGGLE_TODO)<number>();
+export const removeTodo = createStandardAction(REMOVE_TODO)<number>();

src/modules/todos/index.ts

@@ -0,0 +1,3 @@
+export { default } from './reducer'; // reducer 를 불러와서 default로 내보내겠다는 의미
+export * from './actions'; // 모든 액션 생성함수들을 불러와서 같은 이름들로 내보내겠다는 의미
+export * from './types'; // 모든 타입들을 불러와서 같은 이름들로 내보내겠다는 의미

src/modules/todos/reducer.ts

@@ -0,0 +1,22 @@
+import { TodosState, TodosAction } from './types';
+import { createReducer } from 'typesafe-actions';
+import { ADD_TODO, TOGGLE_TODO, REMOVE_TODO } from './actions';
+
+// 초기 상태 선언
+const initialState: TodosState = [];
+
+// 리듀서 작성
+const todos = createReducer<TodosState, TodosAction>(initialState, {
+  [ADD_TODO]: (state, action) =>
+    state.concat({
+      ...action.payload, // id, text 를 이 안에 넣기
+      done: false
+    }),
+  // 바구조화 할당을 활용하여 payload 값의 이름을 바꿀 수 있음
+  [TOGGLE_TODO]: (state, { payload: id }) =>
+    state.map(todo => (todo.id === id ? { ...todo, done: !todo.done } : todo)),
+  [REMOVE_TODO]: (state, { payload: id }) =>
+    state.filter(todo => todo.id !== id)
+});
+
+export default todos;

src/modules/todos/types.ts

@@ -0,0 +1,16 @@
+import { ActionType } from 'typesafe-actions';
+import * as actions from './actions';
+
+// 한번에 모두 import 해와서 actions 에 담았기 때문에
+// 이 부분이 액션의 종류가 만하져도 한 줄로 작성 할 수 있어서 매우 간편합니다.
+export type TodosAction = ActionType<typeof actions>;
+
+// 상태에서 사용 할 할 일 항목 데이터 타입 정의
+export type Todo = {
+  id: number;
+  text: string;
+  done: boolean;
+};
+
+// 이 모듈에서 관리할 상태는 Todo 객체로 이루어진 배열
+export type TodosState = Todo[];