Reducer와 Context를 조합하여 앱 전체에 거친 업데이트를 관리할 수도 있다.
- before
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
export default function TaskApp() {
const [tasks, dispatch] = useReducer(
tasksReducer,
initialTasks
);
function handleAddTask(text) {
dispatch({
type: 'added',
id: nextId++,
text: text,
});
}
function handleChangeTask(task) {
dispatch({
type: 'changed',
task: task
});
}
function handleDeleteTask(taskId) {
dispatch({
type: 'deleted',
id: taskId
});
}
return (
<>
<h1>Day off in Kyoto</h1>
<AddTask
onAddTask={handleAddTask}
/>
<TaskList
tasks={tasks}
onChangeTask={handleChangeTask}
onDeleteTask={handleDeleteTask}
/>
</>
);
}
function tasksReducer(tasks, action) {
switch (action.type) {
case 'added': {
return [...tasks, {
id: action.id,
text: action.text,
done: false
}];
}
case 'changed': {
return tasks.map(t => {
if (t.id === action.task.id) {
return action.task;
} else {
return t;
}
});
}
case 'deleted': {
return tasks.filter(t => t.id !== action.id);
}
default: {
throw Error('Unknown action: ' + action.type);
}
}
}
- after ```jsx // TaskContextProvider.js
import { createContext, useContext } from ‘react’;
export const TasksContext = createContext(null); export const TasksDispatchContext = createContext(null);
export function useTasks() { return useContext(TasksContext); }
export function useTasksDispatch() { return useContext(TasksDispatchContext); }
export default function TaskContextProvider({children}) { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
1
2
3
4
5
6
7
return (
<TasksContext.Provider value={tasks}>
<TasksDispatchContext.Provider value={tasks}>
{children}
</TasksDispatchContext.Provider>
<TasksContext.Provider>
) };
function tasksReducer(tasks, action) { switch (action.type) { case ‘added’: { return […tasks, { id: action.id, text: action.text, done: false }]; } case ‘changed’: { return tasks.map(t => { if (t.id === action.task.id) { return action.task; } else { return t; } }); } case ‘deleted’: { return tasks.filter(t => t.id !== action.id); } default: { throw Error(‘Unknown action: ‘ + action.type); } } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```jsx
// TaskApp.js
import TaskContextProvider from "./TaskContextProvider"
export default function TaskApp() {
return (
<TaskContextProvider>
<h1>Day off in Kyoto</h1>
<AddTask/>
<TaskList/>
</TaskContextProvider>
);
}