-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
리덕스 툴킷 + axios 에러핸들링 질문드립니다
22.02.24 18:23 작성 조회수 322
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? 라는 함수가 있다는데 임포트 해와도 에러만 날뿐입니다.
제가 청크 미들웨어를 한번도 안써봐서 이렇게 헤메는걸까요? 아니면 툴킷은 따로 에러핸들링 하는 방법이 있나요?
답변을 작성해보세요.
0
답변 1