-
Notifications
You must be signed in to change notification settings - Fork 33
/
todos.ts
70 lines (59 loc) · 2.23 KB
/
todos.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import {
/* action, */
createStandardAction,
createAction,
ActionType,
createReducer
} from 'typesafe-actions';
// 액션 타입 선언
const ADD_TODO = 'todos/ADD_TODO';
const TOGGLE_TODO = 'todos/TOGGLE_TODO';
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>();
// 모든 액션 객체들에 대한 타입 준비
const actions = {
addTodo,
toggleTodo,
removeTodo
};
type TodosAction = ActionType<typeof actions>;
// 상태에서 사용 할 할 일 항목 데이터 타입 정의
export type Todo = {
id: number;
text: string;
done: boolean;
};
// 이 모듈에서 관리할 상태는 Todo 객체로 이루어진 배열
export type TodosState = Todo[];
// 초기 상태 선언
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;