Immer

불편성을 위해 Immer라이브러리 사용

const reducer = (state = initialState, action) => {
    	....
        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 {
                ...state,
                mainPosts,
                addCommentLoading: false,
                addCommentDone: true,
            };
        case ADD_COMMENT_FAILURE:
            return {
                ...state,
                addCommentLoading: false,
                addCommentError: action.error,
            }

        default:
            return state;
    }
}

immer 사용

const reducer = (state = initialState, action) => {
    return 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.mainPosts.unshift(dummyPost(action.data))
                draft.addPostLoading = false;
                draft.addPostDone = true;
                break;
            case ADD_POST_FAILURE:
                draft.addPostLoading = false;
                draft.addPostError = action.error;
                break;
            case REMOVE_POST_REQUEST:
                draft.removePostLoading = true;
                draft.removePostDone = false;
                draft.removePostError = null;
                break;
            case REMOVE_POST_SUCCESS:

                draft.mainPosts = draft.mainPosts.filter((y) => y.id !== action.data);
                draft.removePostLoading = false;
                draft.removePostDone = true;
                break;
            case REMOVE_POST_FAILURE:
                draft.removePostLoading = false;
                draft.removePostError = action.error;
                break;
            case ADD_COMMENT_REQUEST:
                draft.removeCommentLoading = true;
                draft.removeCommentDone = false;
                draft.removeCommentError = null;
            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;
                    // 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 {
                    //     ...state,
                    //     mainPosts,
                    //     addCommentLoading: false,
                    //     addCommentDone: true,
                    // };
                    break;
                }
            case ADD_COMMENT_FAILURE:

                draft.addCommentLoading = false;
                draft.addCommentError = action.error;
                break;
            default:
                break;
        }

    });

}



export default reducer