🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

  • 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

saga 비동기 처리에서 페이지 이동

22.04.25 18:42 작성 조회수 199

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) 창도

성공 또는 실패에 따라 유동적으로 달고 싶은데

조건을 어떻게 주고 어느 파일에 다는지 궁금합니다.

답변 1

답변을 작성해보세요.

0

정해진 건 없고 한 군데로 통일하면 됩니다. 다만 리덕스 툴킷을 사용하지 않으면 컴포넌트에서 성공/실패 후처리를 하는 게 조금 어렵습니다. 보통 거기서 라우터 전환이나 얼럴트를 하거든요.

okky님의 프로필

okky

질문자

2022.04.26

페이지를 넘길 때 컴포넌트 안에서만 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를 넣어줘야 한다는 단점이 있어요,

채널톡 아이콘