인프런 커뮤니티 질문&답변
작성한 질문수
delay(1000)
작성
·
136
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
선생님 yield 문제였습니다 해결했습니다!!.
선생님 이거 위에 리듀서쪽에서 저 새게 다적어주시는데 기존 initialState 값하고 같으면 굳이 안적어줘도 되지 않나요? 강의에서는 초기화라고 하시는데 굳이 적는 이유좀 설명 부탁드리겠습니다.
...state는 initialState가 아닙니다. 이전 state입니다. 이전 state는 initialState랑 스테이트가 다를 수 있습니다. 예를 들어 로그인이 실패한 후 다시 로그인 시도를 하는 상황에서 state가 어떻게 변할지 추적해보세요.
어 선생님 ...state가 이전값을 표현한다는게 어떤말인지는 압니다 그런데 어떠한 요청도 없을시 첫 로딩되었을때는 ...state가 initialState와 같은것은 맞을까요?
그리고
case LOG_OUT_SUCCESS:
return {
...state,
logOutLoading: false,
logOutDone: true,
logInDone: false,
me: null,
}그러면 여기 액션 리듀서에서도 loginDone 부븐은 다시 false값으로 돌려줘야하는것도 맞나요? 선생님 코드에서는 loginDone은 그냥 두시길래요 그것도 귀찮으시겠지만 답변 부탁드립니다.
첫 로딩때는 initialState와 같습니다.
logInDone은 로그아웃석세스가 아니라 따로 false로 만드는 액션 만들어서 로그인 성공 후 바로 dispatch하여 돌려주시는 게 맞습니다.
아네 선생님 이제 어느정도 굴러가는지 흐름이해 했습니다 선생님께서 말씀하신 성공후 바로 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로 되돌리는 액션을 호출해줘야 하는 겁니다.
case: RESET_LOGIN
return {...state, loginDone: false, loginErr: false} 같은 액션 하나 만드시면 됩니다.
저 세 개가 기존과 같을지 아닐지 아무도 모릅니다. 그래서 적는 겁니다.