npm i immer
import produce from 'immer'
// reduce에 달아준다.
switch (action.type) {
case ADD_POST_REQUEST:
return {
...state,
addPostLoading: true,
addPostDone: false,
addPostError: null,
};
case ADD_POST_SUCCESS:
return {
...state,
addPostLoading: false,
addPostDone: true,
mainPosts: [dummyData(action.data), ...state.mainPosts],
};
case ADD_POST_FAILURE:
return {
...state,
addPostLoading: false,
addPostError: action.error,
};
}
case ADD_COMMENT_SUCCESS: {
const postIndex = state.mainPosts.findIndex((y) => y.id === action.data.postId);
const post = { ...state.mainPosts[postIndex] };
post.Comments = [dummyComment(action.data.content), ...post.Comments];
const mainPosts = [...state.mainPosts];
mainPosts[postIndex] = post;
return {
mainPosts,
addCommentLoading: false,
addCommentDone : true,
break;
}
}
default:
return state;
produce(state, (draft) => {
switch (action.type) {
case ADD_POST_REQUEST:
draft.addPostLoading = true;
draft.addPostDone = false;
draft.addPostError = null;
break;
case ADD_POST_SUCCESS:
draft.addPostLoading = false;
draft.addPostDone = true;
draft.mainPosts.unshift(dummyData(action.data));
break;
case ADD_POST_FAILURE:
draft.addPostLoading = action.error;
draft.addPostError = false;
break;
}
}
case ADD_COMMENT_SUCCESS: {
const post = draft.mainPosts.find((v) => v.id === action.data.postId);
post.Comments.unshift(dummyComment(action.data.content));
draft.addCommentLoading = false;
draft.addCommentDone = true;
break;
}
default:
break;
no-param-reaaign
을.eslintrc
에 추가하기
이전보다 10줄가량 줄어든게 보인다.
return
문을 안쓰고 break
를 쓰는 점, 앞에 draft
를 붙이는 점, 불변성을 지키지 않는 점이 눈에 띈다.
불변성을 지키는 데 있어 해가 될 수 있는 unshift
나 push
같은것을 마음껏 쓸 수 있다.
마지막 default문
도 return state가 아닌 break
를 쓴다.
immer를 사용 할 때는 불변성을 꼭 지키지 말아야 한다