진로적 고민입니다. 선생님 ㅠ 조언 부탁드립니다.

서버 사이드랜더링 후 오류 관련 질문 드립니다.

아 선생님 해결했습니다! reudcer에서 swich문에 case끝날때 break 안해줘서 오류 발생했던것 같습니다 . 감사합니다!!

게시물 작성 후 닉네임 변경

//saga import { delay, all, fork, takeLatest, put, throttle, call } from "redux-saga/effects"; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, REMOVE_POST_REQUEST, REMOVE_POST_SUCCESS, REMOVE_POST_FAILURE, ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_COMMENT_FAILURE, LOAD_POSTS_REQUEST, LOAD_POSTS_SUCCESS, LOAD_POSTS_FAILURE, LIKE_POST_REQUEST, LIKE_POST_SUCCESS, LIKE_POST_FAILURE, UNLIKE_POST_REQUEST, UNLIKE_POST_SUCCESS, UNLIKE_POST_FAILURE } from '../reducers/post' import { ADD_POST_TO_ME, REMOVE_POST_TO_ME } from "../reducers/user"; import axios from "axios"; import shortId from 'shortid'; function addPostAPI(data) { return axios.post('/post', { content: data }); } function* addPost(action) { try { const result = yield call(addPostAPI, action.data); yield console.log(result) yield put({ type: ADD_POST_SUCCESS, data: result.data, }); yield put({ type: ADD_POST_TO_ME, data: result.data.id, }); } catch (err) { console.error(err); yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function removePostAPI(data) { return axios.delete(`/post/${data}`) } function* removePost(action) { console.log(action.data) try { const result = yield call(removePostAPI, action.data) yield console.log(typeof result.data.PostId) yield put({ type: REMOVE_POST_SUCCESS, data: result.data }) yield put({ type: REMOVE_POST_TO_ME, data: result.data.PostId }) } catch (err) { yield put({ type: REMOVE_POST_FAILURE, data: err.response.data }); } } function addCommentAPI(data) { return axios.post(`/post/${data.postId}/comment`, data) } function* addComment(action) { try { const result = yield call(addCommentAPI, action.data) yield put({ type: ADD_COMMENT_SUCCESS, data: result.data }); } catch (err) { yield put({ type: ADD_COMMENT_FAILURE, data: err.response.data }); } } function loadPostsAPI(data) { return axios.get('/posts', data); } function* loadPosts(action) { try { const result = yield call(loadPostsAPI, action.data); yield console.log(result) yield put({ type: LOAD_POSTS_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: LOAD_POSTS_FAILURE, data: err.response.data, }); } } function likePostAPI(data) { return axios.patch(`/post/${data}/like `, data); } function* likePost(action) { try { const result = yield call(likePostAPI, action.data); yield put({ type: LIKE_POST_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: LIKE_POST_FAILURE, data: err.response.data, }); } } function UnLikePostAPI(data) { return axios.delete(`/post/${data}/like`); } function* UnLikePost(action) { try { const result = yield call(UnLikePostAPI, action.data); yield put({ type: UNLIKE_POST_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: UNLIKE_POST_FAILURE, data: err.response.data, }); } } function* watchLoadPosts() { yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts); } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPost) } function* watchRemovePost() { yield takeLatest(REMOVE_POST_REQUEST, removePost) } function* watchCommentPost() { yield takeLatest(ADD_COMMENT_REQUEST, addComment) } function* watchLikePost() { yield takeLatest(LIKE_POST_REQUEST, likePost) } function* watchUnLiketPost() { yield takeLatest(UNLIKE_POST_REQUEST, UnLikePost) } export default function* postSaga() { yield all([ fork(watchAddPost), fork(watchCommentPost), fork(watchRemovePost), fork(watchLoadPosts), fork(watchLikePost), fork(watchUnLiketPost), ]); }

게시물 작성 후 닉네임 변경

//리듀서 import shortId from 'shortid'; import produce from 'immer'; import faker from 'faker'; import { LIKE_FAILURE, LIKE_REQUEST, LIKE_SUCCESS } from './user'; export const initialState = { mainPosts: [], imagePath: [], hasMorePosts: true, loadPostsLoading: false, loadPostsDone: false, loadPostsError: null, likeLoading: false, likeDone: false, likeError: null, unLikeLoading: false, unLikeDone: false, unLikeError: null, addPostLoadding: false, addPostDone: false, addPostErr: null, removePostLoadding: false, removePostDone: false, removePostErr: null, addCommentLoadding: false, addCommentDone: false, addCommentErr: null, } // export const getDemmuyPost = (number) => Array(number).fill().map(() => ({ // id: shortId.generate(), // User: { // id: shortId.generate(), // nickname: faker.name.findName(), // }, // content: faker.lorem.paragraph(), // Images: [{ // src: faker.image.image(), // }], // Comments: [{ // User: { // id: shortId.generate(), // nickname: faker.name.findName(), // }, // content: faker.lorem.sentence(), // }], // })) export const LOAD_POSTS_REQUEST = 'LOAD_POSTS_REQUEST'; export const LOAD_POSTS_SUCCESS = 'LOAD_POSTS_SUCCESS'; export const LOAD_POSTS_FAILURE = 'LOAD_POSTS_FAILURE'; export const ADD_POST_REQUEST = 'ADD_POST_REQUEST' export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS' export const ADD_POST_FAILURE = 'ADD_POST_FAILURE' export const REMOVE_POST_REQUEST = 'REMOVE_POST_REQUEST' export const REMOVE_POST_SUCCESS = 'REMOVE_POST_SUCCESS' export const REMOVE_POST_FAILURE = 'REMOVE_POST_FAILURE' export const ADD_COMMENT_REQUEST = 'ADD_COMMENT_REQUEST' export const ADD_COMMENT_SUCCESS = 'ADD_COMMENT_SUCCESS' export const ADD_COMMENT_FAILURE = 'ADD_COMMENT_FAILURE' export const LIKE_POST_REQUEST = 'LIKE_POST_REQUEST'; export const LIKE_POST_SUCCESS = 'LIKE_POST_SUCCESS'; export const LIKE_POST_FAILURE = 'LIKE_POST_FAILURE'; export const UNLIKE_POST_REQUEST = 'UNLIKE_POST_REQUEST'; export const UNLIKE_POST_SUCCESS = 'UNLIKE_POST_SUCCESS'; export const UNLIKE_POST_FAILURE = 'UNLIKE_POST_FAILURE'; export const addPostAction = (data) => { return { type: ADD_POST_REQUEST, data } } export const addCommentAction = (data) => { return { type: ADD_COMMENT_REQUEST, data } } const reducer = (state = initialState, action) => { return produce(state, (draft) => { switch (action.type) { case LOAD_POSTS_REQUEST: draft.loadPostsLoading = true; draft.loadPostsDone = false; draft.loadPostsError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostsLoading = false; draft.loadPostsDone = true; draft.mainPosts = action.data.concat(draft.mainPosts); draft.hasMorePosts = draft.mainPosts.length item.id !== action.data.PostId) break; case REMOVE_POST_FAILURE: draft.removePostLoadding = false draft.removePostErr = action.err break; case ADD_COMMENT_REQUEST: draft.addCommentLoadding = true draft.addCommentDone = false draft.addCommentErr = null break; case ADD_COMMENT_SUCCESS: const post = draft.mainPosts.find((item) => { return item.id === action.data.PostId }) post.Comments.unshift(action.data) draft.addCommentLoadding = false draft.addCommentDone = true break; case ADD_COMMENT_FAILURE: draft.addCommentLoadding = false draft.addCommentErr = action.error case LIKE_POST_REQUEST: draft.likeLoading = true draft.likeDone = false draft.likeError = null break; case LIKE_POST_SUCCESS: { draft.likeLoading = false draft.likeDone = true const post = draft.mainPosts.find((item) => item.id === action.data.PostId) post.Likers.push({id: action.data.UserId}) break; } case LIKE_POST_FAILURE: draft.unLikeLoading = false draft.unLikeError = true case UNLIKE_POST_REQUEST: draft.unLikeLoading = true draft.unLikeDone = false draft.unLikeError = null break; case UNLIKE_POST_SUCCESS: { draft.unLikeLoading = false draft.unLikeDone = true const post = draft.mainPosts.find((v) => v.id === action.data.PostId); post.Likers = post.Likers.filter((v) => v.id !== action.data.UserId); break; } case UNLIKE_POST_FAILURE: draft.unLikeLoading = false draft.unLikeDone = true default: return state } }) } export default reducer

delay(1000)

(사진)선생님 yield 문제였습니다 해결했습니다!!.선생님 이거 위에 리듀서쪽에서 저 새게 다적어주시는데 기존 initialState 값하고 같으면 굳이 안적어줘도 되지 않나요? 강의에서는 초기화라고 하시는데 굳이 적는 이유좀 설명 부탁드리겠습니다.