• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

REDUX-SAGA 동작에 대한 질문

19.09.20 15:51 작성 조회수 208

0

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

React로 NodeBird SNS 만들기

답변 5

·

답변을 작성해보세요.

0

조현영님의 프로필

조현영

지식공유자

2019.09.20

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

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

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

0

귯결~소쥬촤락님의 프로필

귯결~소쥬촤락

질문자

2019.09.20

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

0

조현영님의 프로필

조현영

지식공유자

2019.09.20

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

0

귯결~소쥬촤락님의 프로필

귯결~소쥬촤락

질문자

2019.09.20

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

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

0

조현영님의 프로필

조현영

지식공유자

2019.09.20

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

이 글과 비슷한 Q&A