• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

delay(1000)

22.09.05 05:03 작성 조회수 97

0

sagas/user.js

import { delay, all, fork, put, takeLatest } from "redux-saga/effects";


function logInAPI() {
    return axios.post('/api/login')
}

function* logIn(action) {
    console.log('saga start')
    try {
        // const result = yield call(logInAPI, action.data)
        delay(1000)
        yield put({
            type: 'LOG_IN_SUCCESS',
            data: action.data
        });
    } catch (err) {
        yield put({
            type: 'LOG_IN_FAILURE',
            data: err.response.data
        });
    }
}

function logOutAPI() {
    return axios.post('/api/logaout')
}

function* logOut() {
    try {
        // const result = yield call(logOutAPI)
        delay(1000)
        yield put({
            type: 'LOG_OUT_SUCCESS',
        });
    } catch (err) {
        yield put({
            type: 'LOG_OUT_FAILURE',
        });
    }
}

function* watchLogIn() {
    yield takeLatest('LOG_IN_REQUEST', logIn)
}

function* watchLogOut() {
    yield takeLatest('LOG_OUT_REQUEST', logOut)
}

export default function* userSaga() {
    yield all([
        fork(watchLogIn),
        fork(watchLogOut)
    ])
}

선생님 로딩스피너가 안돌아가고 바로 로그인이 되어버리는데 delay값을 수정해도 스피너가 안보여서 뭐가 잘못 된건가 하고 put으로 반환하는 type값을 없는값을 줬더니 스피너가 돌아가더라구요 delay값을 아무리 수정해도 바로 로그인 되어비리는데 제 코드가 잘못된건가요?

답변 1

답변을 작성해보세요.

0

uphoon님의 프로필

uphoon

질문자

2022.09.05

image선생님 yield 문제였습니다 해결했습니다!!.

선생님 이거 위에 리듀서쪽에서 저 새게 다적어주시는데 기존 initialState 값하고 같으면 굳이 안적어줘도 되지 않나요? 강의에서는 초기화라고 하시는데 굳이 적는 이유좀 설명 부탁드리겠습니다.

저 세 개가 기존과 같을지 아닐지 아무도 모릅니다. 그래서 적는 겁니다.

uphoon님의 프로필

uphoon

질문자

2022.09.05

기존과 같을지 아닐지 모른다는 말씀이 무엇인지 서버에서 받아올때 값이 이상해질수도 있다는건가요? 자세한 설명 부탁드립니다.

...state는 initialState가 아닙니다. 이전 state입니다. 이전 state는 initialState랑 스테이트가 다를 수 있습니다. 예를 들어 로그인이 실패한 후 다시 로그인 시도를 하는 상황에서 state가 어떻게 변할지 추적해보세요.

uphoon님의 프로필

uphoon

질문자

2022.09.05

어 선생님 ...state가 이전값을 표현한다는게 어떤말인지는 압니다 그런데 어떠한 요청도 없을시 첫 로딩되었을때는 ...state가 initialState와 같은것은 맞을까요?

그리고

case LOG_OUT_SUCCESS:
    return { 
       ...state,
       logOutLoading: false,
       logOutDone: true,
       logInDone: false,
       me: null,
     }

그러면 여기 액션 리듀서에서도 loginDone 부븐은 다시 false값으로 돌려줘야하는것도 맞나요? 선생님 코드에서는 loginDone은 그냥 두시길래요 그것도 귀찮으시겠지만 답변 부탁드립니다.

첫 로딩때는 initialState와 같습니다.

logInDone은 로그아웃석세스가 아니라 따로 false로 만드는 액션 만들어서 로그인 성공 후 바로 dispatch하여 돌려주시는 게 맞습니다.

uphoon님의 프로필

uphoon

질문자

2022.09.05

아네 선생님 이제 어느정도 굴러가는지 흐름이해 했습니다 선생님께서 말씀하신 성공후 바로 dispatch하여 원상태로 돌려주는게 맞다고 하시는 어차피 loginsucces 부분에서 logindone : false로 하는 부분 있는데 그러면 따로 로그인 성공후 바로 dispatch 안해도 되는부분 맞는걸까요? 모든로직 부분에서 어차피 request 부분에서 done, err부분 dispatch 해주는 부분이 있어서 선생님 이 말씀하신 성공후에 바로 dispatch하는 부분이 꼭 필요한지 그걸 알고싶네요?

일단 login_success에서는 loginDone을 true로 만들고요. 예를 들어 로그인 성공 시 알림이 가게 하는 코드가 있다면 useEffect 안에서 if (loginDone) alert(...) 이런 식으로 있을 겁니다. 근데 이게 loginDone을 다시 false로 안 되돌리면 useEffect가 실행될 때마다 alert 창이 떠버립니다. 그래서 alert 후에 dispatch로 다시 loginDone이랑 loginErr를 false로 되돌리는 액션을 호출해줘야 하는 겁니다.

uphoon님의 프로필

uphoon

질문자

2022.09.06

어 그러면 따로 액션 만들어야 하는걸까요 이해가 이부분이 잘안가서 그런데 예시코드 하나만 혹시 보여주실수 있으실까요?

case: RESET_LOGIN

return {...state, loginDone: false, loginErr: false} 같은 액션 하나 만드시면 됩니다.

uphoon님의 프로필

uphoon

질문자

2022.09.06

감사합니다 선생님! 선생님 강의보고 꼭 취직할게요!! node.js도 들어보려고 합니다 감사합니다!!