인프런 커뮤니티 질문&답변
작성한 질문수
리덕스 툴킷 + axios 에러핸들링 질문드립니다
해결된 질문
작성
·
480
0
안녕하세요.
지난번에 리덕스 툴킷관련해서 addCass로 여러 상태관리에 대해 많은 공부가 됐습니다.
단순 상태관리까지는 성공했는데 이제 axios를 붙이다보니 에러핸들링에 관련해서 궁금한점이 생겼습니다.
export const loginAsync = createAsyncThunk('user/login', async(action) => {
const { data } = action;
return axios
.post('http://localhost:5000/login', data)
.then((res) => res.data)
.catch((e) => e);
});
이렇게 createAsyncThunk를 만들어서 통신을 하는데
대충 테스트용으로 만들어놓은 api에서
app.post('/login', (req, res, next) => {
const { userId, userPassword } = req.body;
if (userId !== 'test' || userPassword !=='123' ) {
return res.status(403).json({
login : false
});
} else {
return res.json({
userName : '이름',
userAge : 00,
userJob : '초보 프론트엔드'
});
}
})
이렇게 내보냈습니다.
성공했을때는 문제가 없으나 실패했을때가 문제입니다.
성공했을때는 문제가 없으나 실패했을때가 문제입니다.
로그인 실패시
export const userSlice = createSlice({
name : 'user',
initialState,
reducers : {},
extraReducers : (builder) => {
builder
.addCase(loginAsync.pending, (state) => {
state.logInLoading = true;
state.logInError = null;
state.logInDone = false;
})
.addCase(loginAsync.fulfilled, (state, action) => {
console.log('성공')
// state.logInLoading = false;
// state.userInfo = action.payload;
// state.logInDone = true;
})
.addCase(loginAsync.rejected, (state, action) => {
console.log('실패')
// state.logInLoading = false;
// state.userInfo = null;
// state.logInError = action.payload.error;
})
}
});
실패해도 fulfilled에 걸리게 됩니다.
403에러를 띄웠다면 saga에서는 failure액션에 걸렸던거같은데 툴킷은 다른거같아서 좀 검색해보니
rejectedValue? 라는 함수가 있다는데 임포트 해와도 에러만 날뿐입니다.
403에러를 띄웠다면 saga에서는 failure액션에 걸렸던거같은데 툴킷은 다른거같아서 좀 검색해보니
rejectedValue? 라는 함수가 있다는데 임포트 해와도 에러만 날뿐입니다.
제가 청크 미들웨어를 한번도 안써봐서 이렇게 헤메는걸까요? 아니면 툴킷은 따로 에러핸들링 하는 방법이 있나요?
아...어디서 에러처리를 저기서 캐치에서 넘겨준다고 본거같은데... 그럼 then절까지만 작성하면 될까요?