REDUX-SAGA 동작에 대한 질문

Question

//saga.js function* action () { yield axios . get ( '/' ). then (() => { console . log ( "API!" ) }) yield call (() => { console . log ( 'ACTION!' ) }) } function* watchAction () { yield takeEvery ( ACTION , action) } function* useSaga () { yield all ([ fork (watchAction)]) } //index.js const Index = () => { const dispatch = useDispatch () useEffect (() => { dispatch ({ type : ACTION , }) console . log ( 'INDEX PAGE' ) }, []) return ( <> ) } INDEX PAGE API! ACTION 이순으로 콘솔이 찍히게 되는데욥 API! ACTION INDEX PAGE 이렇게 콘솔을 찍히게 할 수 있는 방법이 있을 까요?? //index.js const Index = () => { const dispatch = useDispatch () useEffect (() => { axios.get('/').then(()=>{ console.log("API!") return Promise.resolve() }) .then(()=>{ dispatch ({ type : ACTION , }) return Promise.resolve() }) .then(()=>{ console . log ( 'INDEX PAGE' ) }) }, []) return ( <> ) } 이렇게 하면 동작은 되지만 REDUX-SAGA를 이용해서 해결을 하고 싶어서욥..

제로초(조현영) · Answer

이 부분은  https://github.com/ZeroCho/react-nodebird/blob/master/ch8/front/pages/signup.js#L32 에서처럼 useEffect에서 처리해야겠습니다. 또는 서버사이드인 경우 server.js에서 백엔드의 isLoggedIn 미들웨어같은 것과 라우터를 만들어서 처리해도 되겠습니다.

귯결~소쥬촤락 · Answer

console.log는 그냥 확인차 찍어본거구요. const { store,res , isServer } = ctx store.dispatch({ type : LOAD_USER_REQUEST}) if(isServer){    const isLogged = store.getState().user.isLogged    if(!isLogged){        res.writeHead(301, { Location : '/login' })        res.end()   } }else{   Router.push('/login') } 이런 로직을 구현하고 싶은데요. api요청에 응답이 오기전에  if문이 있는 라인이 실행이 되어서요.. 이런 로직들은 saga의 함수가 있는 쪽에 넣는게 더 옳은 걸까요?????

제로초(조현영) · Answer

getInitialProps 안에서 console.log를 찍으실 이유가 없습니다. 컴포넌트에서 콘솔을 찍으시면 서버사이드렌더링 시에는 console.log가 더 뒤에 나올 겁니다. 다만, 클라이언트사이드렌더링 시에는 console.log가 먼저 나옵니다.

귯결~소쥬촤락 · Answer

아니요.. 아예 다른 문제입니다. INDEX PAGE API! ACTION 이순으로 콘솔이 찍히게 되는데욥 API! ACTION INDEX PAGE 이렇게 콘솔을 찍히게 할 수 있는 방법이 있을 까요?? 이 문제에 대한 질문입니다. getInitialProps에서도 똑같은 문제입니다... getInitialProps = (context) => { dispatch({type : LOAD_USER_REQUEST }) console.log(context.ctx.store.getState().user.isLogged) } 만약에 이런 동작을 실행하고 싶다면 어떻게 해야할까요?? API요청 후 응답이 오기전에 console.log(context.ctx.store.getState().user.isLogged) 이 코드가 실행됩니다. dispatch({ type : LOAD_USER_REQUEST }) --> API요청 --> put({ type : LOAD_USER_SUCCESS }) --> console.log() 이 순으로 동작을 원합니다. 하지만 실제 동작은 dispatch( type : LOAD_USER_REQUEST }) -> API요청 -> console.log(isLogged)->put({ type : LOAD_USER_SUCCESS }) 이렇게 됩니다. 요점을 말하자면 _app.js의 getInitialProps함수에서 API요청 응답 후 그 다음 로직이 실행되길 원합니다. 응답전에 실행되는게 아니라요

제로초(조현영) · Answer

화면 렌더링 전에 액션을 실행하고 싶으신 거죠? getInitialProps에서 하셔야 합니다.