인프런 커뮤니티 질문&답변
작성한 질문수
saga 비동기 처리에서 페이지 이동
작성
·
303
0
saga에서 비동기 통신으로 성공 또는 실패로 나뉘는데
try_catch에서 통신이 성공하면
어디에서 페이지를 이동하는 코드를 작성해야 하나요?
1. component
dispatch({
type: UPLOAD_REQUEST
data: index
})
// Router.push("/upload")
2. saga
function* addItem(action) {
try {
const result = yield call(api)
yield put({
type: UPLOAD_SUCCESS
data: result.data
})
// Router.push("/upload")
} catch (err) {
yield put({
type: UPLOAD_FAUILRE
error : err.response.data
})
}
}
API 통신에 경고문(alert) 창도
성공 또는 실패에 따라 유동적으로 달고 싶은데
조건을 어떻게 주고 어느 파일에 다는지 궁금합니다.
퀴즈
Redux Thunk의 주된 역할은 무엇일까요?
상태 변화 로깅하기
비동기 액션 처리 돕기
액션 타입 상수화 강제하기
리듀서 불변성 자동으로 관리하기
답변 1
0
제로초(조현영)
지식공유자
정해진 건 없고 한 군데로 통일하면 됩니다. 다만 리덕스 툴킷을 사용하지 않으면 컴포넌트에서 성공/실패 후처리를 하는 게 조금 어렵습니다. 보통 거기서 라우터 전환이나 얼럴트를 하거든요.
페이지를 넘길 때 컴포넌트 안에서만 Router.push 되더라고요
밖에 saga, reducer 먹지 않아서
구글링 해보니 store 안에 history 연결을 해서 페이지를 이동하더라구요
그래서 제가 한 방식은
const router = uesRouter( );
const onClickEvnet = useCallback(( ) => {
const history = router;
dispatch({
type: UPLOAD_REQUEST,
history,
})
})
history 넘어온 객체를 통해서 saga에서 history.push("/")를 하면 되더라구요
근데 이렇게 하면 단점은 페이지를 이동할 경우에 계속 history를 넣어줘야 한다는 단점이 있어요,