사용자가 보았을 때 게시물, 댓글, 스크랩 등이 실시간으로 업데이트되지 않는 문제
웹 페이지를 배포한 후 게시물을 작성하면 해당 페이지에 게시물이 표시되어야 합니다. 그러나 게시물이 추가되어 있지 않거나, 댓글은 작성해도 총 댓글 개수가 증가하지 않는 등의 오류가 발생했다. 새로고침을 해야만 업데이트가 되었고 이러한 문제가 발생하면 사용자가 게시물을 작성하거나 댓글을 달았다는 것이 제대로 전달되지 않아 불편함이 느껴진다.
원인
원인은 initialState를 업데이트 해주지 않아서였다. 우선 우리는 slice를 나눌 때 어떻게 나눌지 크게 게획하지 않아서 처음에는 페이지별로 나누었다. 몇 가지는 comment, sse, search와 같이 기능별로 나누기도 했다.
createAsyncThunk를 통해 API 요청을 하고 extraReducers에서 업데이트를 해주면 되지만, 위의 이미지와 같이 한 페이지에는 있지만 사용되는 state가 나뉘어져있어서 어려웠다. 그래서 실시간으로 업데이트를 할 수 없고, 서버에는 정상적으로 요청이 들어갔기 때문에 새로고침을 하면 정상적으로 나타나는 것이다.
해결
위와 같은 원인으로 Action을 따로 만들어주었다. 다른 slice에서 업데이트가 되고 나서 업데이트를 해주는 것이다. 댓글로 예를 들자면,
- petworkSlice.js의 initialState
const initialState = {
...
missingPostDetail: {},
catchPostDetail: {},
...
};missingPostDetail, catchPostDetial에 사용자 게시물에 대한 정보(게시물 상세조회시 사용)가 들어있고, 해당 게시물의 댓글 갯수 정보 또한 들어있다.
- petworkSlice.js comment개수 증가 action
...
addCommentCount: (state) => {
state.missingPostDetail.commentCount =
state.missingPostDetail.commentCount + 1;
state.catchPostDetail.commentCount =
state.catchPostDetail.commentCount + 1;
},
...- commentSlice.js의 comment 요청
...
builder
.addCase(__postComment.fulfilled, (state, action) => {
state.commentList = [action.payload, ...state.commentList];
})
.addCase(__postComment.rejected, (state, action) => {
state.error = true;
state.errorMessage = action.payload;
});
...- comment 작성 요청 함수
const submitHandler = async (content) => {
...
dispatch(__postComment(data));
dispatch(addCommentCount());
...위처럼 Slice가 나뉘어져 있어서 builder의 addCase에서 게시물의 댓글 갯수를 바로 업데이트 할 수 없었다. 따라서 petworkSlice에 게시물의 댓글 갯수를 증가시켜주는 action을 만들어주고 commentSlice에서 댓글의 post요청이 완료되면 댓글의 갯수를 따로 증가시켜주었다.
회고
에러를 해결하면서 너무 많이 slice를 나누는 기준을 명확히 하지 않은 것에 대해 깊이 고민하지 않았던 것 같다. 같은 slice에 있으면 댓글 작성 요청 시 state를 업데이트할 수 있어서 따로 action을 만들어야 했기 때문이다. 페이지별로 크게 나누고 기능별로 요청하는 list를 따로 두면서 위와 같이 나눴지만, slice의 구조에 대해서도 더 깊이 고민해야 한다는 것을 깨달았다.
