mainPosts in reducer 질문 있습니다

// reducer
export const initialState = {
mainPosts: [], // 메인 게시글들
imagePaths: [], // 이미지 url
hasMorePosts: true, // 가져오려는 시도
loadPostsLoading: false,
loadPostsDone: false,
loadPostsError: null,
addPostLoading: false,
addPostDone: false,
addPostError: null,
};

case LOAD_POSTS_SUCCESS:

return {

...state,

loadPostsLoading: false,

loadPostsDone: true,

mainPosts: state.mainPosts.concat(action.data),

hasMorePosts: state.mainPosts.length < 50 ? true : false,

};

function loadPostsAPI(data) {
return axios.get(`http://localhost:3000/posts`, data);
}
 
// saga
function* loadPosts(action) {
try {
// const result = yield call(loadPostsAPI, action.data);
// console.log('result', result);
yield delay(1000);
yield put({
type: LOAD_POSTS_SUCCESS,
data: action.data,
});
} catch (err) {
yield put({
type: LOAD_POSTS_FAILURE,
data: err.response.data,
});
}
}

LoadPostRequest 시 전체 게시글을 불러오는데 생성된 글이 없습니다.

그럼 mainPost: []가 빈 배열이어야 하는데 ...
console.log에 찍힌 결과로는 아래와 같이 undefined가 찍혀 나옵니다.

LOAD_POSTS_REQUEST_MainPosts: [undefined]

떄문에 배열에 값이 들어있는 것으로 인식되어

이렇게 에러가 나옵니다. loadPosts 시 데이터가 없을 땐 빈배열로 하고싶은데 도무지 파악이 되질 않습니다.

일부러 immer를 도입하지 않고 불변성을 지키려하는데

혹시 제가 불변성 관련하여 잘 못하고 있는것인지 조언 부탁드립니다..

PS. 게시글을 추가 시 ...

mainPosts: dummyPost(action.data).concat(state.mainPosts),

ADD_POST_REQUEST 부분은 불변성을 잘 지킨 것인지도 궁금합니다.

질문이 서툴러 죄송합니다. 좀 더 학습해서 질문 수준도 올릴수 있도록 하겠습니다...

참고 github 링크: https://github.com/ko7452/e-Library

인프런 커뮤니티 질문&답변

LOAD_POSTS_REQUEST_MainPosts: [undefined]

떄문에 배열에 값이 들어있는 것으로 인식되어