-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
Immer 적용시 에러 문의드립니다.
23.09.10 21:20 작성 23.09.10 21:54 수정 조회수 379
0
안녕하세요. React Immer 적용시 나타나는 에러인데
확인한번 부탁드려도 될까요?
Immer 적용 전까지 코드는 잘 돌아갔는데, 에러 추적이 힘드네요. 웹 팩 환경설정 문제일까요?
immer module은 잘 설치되어 있습니다.
에러내용
소스코드
front/reducers/user.js
import produce from 'immer';
export const initialState = {
logInLoading : false, // 로그인 시도중
logInDone : false,
loginError : null,
logOutLoading : false, // 로그아웃 시도중
logOutDone : false,
logOutError : null,
signUpLoading : false, // 회원가입 시도중
signUpDone : false,
signUpFailure : null,
changeNicknameLoading : false, // 닉네임 변경 시도중
changeNicknameDone : false,
changeNicknameFailure : null,
me : null,
signUpData : {},
loginData : {},
};
const dummyUser = (data) => ({
...data,
nickname : '제로초',
id : 1,
Posts : [{ id : 1}],
Followings : [{nickname : 'AAA'}, {nickname : 'BBB'}, {nickname : 'CCC'}],
Followers : [{nickname : 'AAA'}, {nickname : 'BBB'}, {nickname : 'CCC'}],
});
export const LOG_IN_REQUEST = 'LOG_IN_REQUEST'; // 액션의 이름
export const LOG_IN_SUCCESS = 'LOG_IN_SUCCESS';
export const LOG_IN_FAILURE = 'LOG_IN_FAILURE';
export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST'; // 액션의 이름
export const LOG_OUT_SUCCESS = 'LOG_OUT_SUCCESS';
export const LOG_OUT_FAILURE = 'LOG_OUT_FAILURE';
export const SIGN_UP_REQUEST = 'SIGN_UP_REQUEST';
export const SIGN_UP_SUCCESS = 'SIGN_UP_SUCCESS';
export const SIGN_UP_FAILURE = 'SIGN_UP_FAILURE';
export const CHANGE_NICKNAME_REQUEST = 'CHANGE_NICKNAME_REQUEST';
export const CHANGE_NICKNAME_SUCCESS = 'CHANGE_NICKNAME_SUCCESS';
export const CHANGE_NICKNAME_FAILURE = 'CHANGE_NICKNAME_FAILURE';
export const FOLLOW_REQUEST = 'FOLLOW_REQUEST';
export const FOLLOW_SUCCESS = 'FOLLOW_SUCCESS';
export const FOLLOW_FAILURE = 'FOLLOW_FAILURE';
export const UNFOLLOW_REQUEST = 'UNFOLLOW_REQUEST';
export const UNFOLLOW_SUCCESS = 'UNFOLLOW_SUCCESS';
export const UNFOLLOW_FAILURE = 'UNFOLLOW_FAILURE';
export const ADD_POST_TO_ME = 'ADD_POST_TO_ME';
export const REMOVE_POST_OF_ME = 'REMOVE_POST_OF_ME';
export const signUpAction = (data) => {
return {
type: SIGN_UP_REQUEST,
data,
};
};
export const changeNicknameAction = (data) => {
return {
type: CHANGE_NICKNAME_REQUEST,
data,
};
};
export const loginRequestAction = (data) => {
return {
type: LOG_IN_REQUEST,
data,
}
};
export const logoutRequestAction = {
type: LOG_OUT_REQUEST,
};
const reducer = (state = initialState, action) => produce(state, (draft) => {
switch (action.type) {
// 로그인
case LOG_IN_REQUEST:
draft.state = true;
draft.loginError = null;
draft.logInDone = false;
break;
case LOG_IN_SUCCESS:
draft.logInLoading = false;
draft.logInDone = true;
draft.me = dummyUser(action.data);
break;
case LOG_IN_FAILURE:
draft.logInLoading = false;
draft.loginError = action.error;
break;
// 로그아웃
case LOG_OUT_REQUEST :
draft.logOutLoading = true;
draft.logOutError = null;
break;
case LOG_OUT_SUCCESS :
draft.logOutLoading = false;
draft.logOutDone = false;
draft.me = null;
break;
case LOG_OUT_FAILURE :
draft.logOutLoading = false;
draft.logOutError = action.error;
break;
// 회원가입
case SIGN_UP_REQUEST :
draft.signUpLoading = true;
draft.signUpDone = false;
draft.signUpError = null;
break;
case SIGN_UP_SUCCESS :
draft.signUpLoading = false;
draft.signUpDone = true;
break;
case SIGN_UP_FAILURE :
draft.signUpLoading = false;
draft.signUpData = action.error;
break;
// 닉네임 변경
case CHANGE_NICKNAME_REQUEST :
draft.changeNicknameLoading= true;
draft.changeNicknameDone= false;
draft.changeNicknameError= null;
break;
case CHANGE_NICKNAME_SUCCESS :
draft.changeNicknameLoading = false;
draft.changeNicknameDone = true;
break;
case CHANGE_NICKNAME_FAILURE :
draft.changeNicknameLoading = false;
draft.changeNicknameData = action.error;
break;
// 게시글 등록시 사용자 dummy Data에 동기화
case ADD_POST_TO_ME :
draft.me.Posts.unshift({ id : action.data})
break;
// return {
// ...state,
// me : {
// ...state.me
// Posts: [ { id.action.data}, ...state.me.Posts]
// }
// }
// 게시글 삭제
case REMOVE_POST_OF_ME :
draft.me.Posts = draft.me.Posts.filter((v) => v.id !== action.data)
break;
// return {
// ...state,
// me : {
// ...state.me,
// Posts : state.me.Posts.filter((v) => v.id !== action.data)
// }
// }
default:
break;
}
});
export default reducer;
답변을 작성해보세요.
답변 1