인프런 커뮤니티 질문&답변

작성한 질문수

React로 NodeBird SNS 만들기

REDUX-SAGA 동작에 대한 질문

작성

367

//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를 이용해서 해결을 하고 싶어서욥..

javascript react

답변 5

제로초(조현영)

지식공유자

이 부분은 https://github.com/ZeroCho/react-nodebird/blob/master/ch8/front/pages/signup.js#L32

에서처럼 useEffect에서 처리해야겠습니다.

또는 서버사이드인 경우 server.js에서 백엔드의 isLoggedIn 미들웨어같은 것과 라우터를 만들어서 처리해도 되겠습니다.

귯결~소쥬촤락

질문자

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의 함수가 있는 쪽에 넣는게 더 옳은 걸까요?????

제로초(조현영)

지식공유자

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

귯결~소쥬촤락

질문자

아니요.. 아예 다른 문제입니다.

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요청 응답 후 그 다음 로직이 실행되길 원합니다. 응답전에 실행되는게 아니라요

제로초(조현영)

지식공유자

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

귯결~소쥬촤락

작성한 질문수

전체 Q&A

질문하기