6.6.3 사가 함수의 예외 처리

src/common/api.js

@@ -1,6 +1,11 @@
 export function callApiLike() {
     return new Promise((resolve, reject) => {
-        console.log('1000')
-        setTimeout(resolve, 1000)
+        setTimeout(() => {
+            if (Math.random() * 10 < 5) {
+                resolve()
+            } else {
+                reject("callApiLike 실패")
+            }
+        }, 1000)
     })
 }

src/timeline/container/TimelineMain.js

@@ -8,6 +8,7 @@ export default function TimelineMain() {
     const dispatch = useDispatch()
     const timelines = useSelector(state => state.timeline.timelines)
     const isLoading = useSelector(state => state.timeline.isLoading)
+    const error = useSelector(state => state.timeline.error)
 
     function onAdd() {
         const timeline = getNextTimeline()
@@ -27,6 +28,7 @@ export default function TimelineMain() {
             <button onClick={onAdd}>타임라인 추가</button>
             <TimelineList timelines={timelines} onLike={onLike}/>
             {isLoading && <p>전송 중 ...</p>}
+            {!!error && <p>에러 발생 ... {error}</p>}
         </div>
     )
 }

src/timeline/state/index.js

@@ -8,7 +8,8 @@ export const types = {
     INCREASE_NEXT_PAGE: 'timeline/INCREASE_NEXT_PAGE',
     REQUEST_LIKE: 'timeline/REQUEST_LIKE',
     ADD_LIKE: 'timeline/ADD_LIKE',
-    SET_LOADING: 'timeline/SET_LOADING'
+    SET_LOADING: 'timeline/SET_LOADING',
+    SET_ERROR: 'timeline/SET_ERROR'
 }
 
 export const actions = {
@@ -22,9 +23,10 @@ export const actions = {
         type: types.SET_LOADING,
         isLoading
     }),
+    setError: error => ({ type: types.SET_ERROR, error })
 }
 
-const INITIAL_STSTE = { nextPage: 0, isLoading: false }
+const INITIAL_STSTE = { nextPage: 0, isLoading: false, error: "" }
 const reducer = createReducer(INITIAL_STSTE, {
     [types.INCREASE_NEXT_PAGE]: (state, action) => {
         state.nextPage += 1
@@ -40,6 +42,7 @@ const reducer = createReducer(INITIAL_STSTE, {
     [types.SET_LOADING]: (state, action) => {
         state.isLoading = action.isLoading
     },
+    [types.SET_ERROR]: (state, action) => (state.error = action.error)
 })
 
 const reducers = [reducer, timelinesReducer]

src/timeline/state/saga.js

@@ -7,7 +7,13 @@ export function* fetchData(action) {
         const { timeline } = yield take(types.REQUEST_LIKE)
         yield put(actions.setLoading(true))
         yield put(actions.addLike(timeline.id, 1))
-        yield call(callApiLike)
+        yield put(actions.setError(''))
+        try {
+            yield call(callApiLike)
+        } catch (error) {
+            yield put(actions.setError(error))
+            yield put(actions.addLike(timeline.id, -1))
+        }
         yield put(actions.setLoading(false))
     }
 }