6.6.4 리덕스 사가로 디바운스 구현하기

src/timeline/container/TimelineMain.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getNextTimeline } from "../../common/mockData";
 import TimelineList from "../component/TimelineList";
@@ -9,6 +9,8 @@ export default function TimelineMain() {
     const timelines = useSelector(state => state.timeline.timelines)
     const isLoading = useSelector(state => state.timeline.isLoading)
     const error = useSelector(state => state.timeline.error)
+    const text = useSelector(state => state.timeline.text)
+    const [currentText, setCurrentText] = useState("")
 
     function onAdd() {
         const timeline = getNextTimeline()
@@ -21,6 +23,12 @@ export default function TimelineMain() {
         dispatch(actions.requestLike(timeline))
     }
 
+    function onChangeText(e) {
+        const text = e.target.value
+        dispatch(actions.trySetText(text))
+        setCurrentText(text)
+    }
+
     console.log("TimelineMain render")
 
     return (
@@ -29,6 +37,8 @@ export default function TimelineMain() {
             <TimelineList timelines={timelines} onLike={onLike}/>
             {isLoading && <p>전송 중 ...</p>}
             {!!error && <p>에러 발생 ... {error}</p>}
+            <input type="text" value={currentText} onChange={onChangeText} />
+            {!!text && <p>{text}</p>}
         </div>
     )
 }

src/timeline/state/index.js

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

src/timeline/state/saga.js

@@ -1,4 +1,4 @@
-import { all, call, put, take, fork } from 'redux-saga/effects'
+import { all, call, put, take, fork, debounce } from 'redux-saga/effects'
 import { callApiLike } from '../../common/api'
 import { actions, types } from './index'
 
@@ -18,7 +18,12 @@ export function* fetchData(action) {
     }
 }
 
+export function* trySetText(action) {
+    const { text } = action
+    yield put(actions.setText(text));
+}
+
 export default function* watcher() {
-    yield all([fork(fetchData)])
+    yield all([fork(fetchData), debounce(500, types.TRY_SET_TEXT, trySetText)]);
 }