게시글 등록,삭제시 실시간 반영되지 않습니다.

안녕하세요 제로초님

강의듣고 리덕스, 사가 대신 툴킷과 내장 썽크를 사용해서 다시 만들어보는 중인데

게시글 등록시 글은 정상적으로 등록이 되는데

게시글 갯수가 실시간으로 바뀌지 않고

새로고침 해야 반영이 됩니다.

삭제할때도

정상적으로 삭제는 되는데 새로고침해야 삭제된 결과가 반영이 됩니다.

백엔드 부분은 강의와 같이 js로 작성했고

게시글 작성 툴킷은 다음과 같이 코드작성했습니다.

// toolkit/post.ts

export const initialState: PostState = {
  // 기본값
  mainPosts: [],
  imagePaths: [],
  postAdded: false,

  // 게시글 로딩
  loadPostLoading: false,
  loadPostDone: false,
  loadPostError: null,

  // 추가 로딩
  hasMorePosts: false,

  // 게시글 작성
  addPostLoading: false,
  addPostDone: false,
  addPostError: null,
  // 게시글 삭제
  removePostLoading: false,
  removePostDone: false,
  removePostError: null,


export const addPostAction = createAsyncThunk(
  'post/addPost',
  async (data: FormData) => {
    const response = await axios.post('/post', data);
    return response.data;
  }
);

export const removePostAction = createAsyncThunk(
  '/post/delete',
  async (data: number) => {
    const response = await axios.delete(`/post/${data}`);
    return response.data;
  }
);

  extraReducers: (builder) => {
  builder
    // 게시글 추가
      .addCase(addPostAction.pending, (draft) => {
        draft.addPostLoading = true;
        draft.addPostDone = false;
        draft.addPostError = null;
      })
      .addCase(addPostAction.fulfilled, (draft, action) => {
        draft.addPostLoading = false;
        draft.addPostDone = true;
        draft.mainPosts.unshift(action.payload);
      })
      .addCase(addPostAction.rejected, (draft, action) => {
        draft.addPostLoading = false;
        draft.addPostError = action.error.message;
      })

      // 게시글 삭제
      .addCase(removePostAction.pending, (draft) => {
        draft.removePostLoading = true;
        draft.removePostDone = false;
        draft.removePostError = null;
      })
      .addCase(removePostAction.fulfilled, (draft, action) => {
        draft.removePostLoading = false;
        draft.removePostDone = true;
        draft.mainPosts = draft.mainPosts.filter(
          (v) => v.id !== action.payload
        );
      })
      .addCase(removePostAction.rejected, (draft, action) => {
        draft.removePostLoading = false;
        draft.removePostError = action.error.message;
      })

   

이해가 안가는 부분이 post에서 게시글 삭제, 입력등의 작업을 하고

user에서 회원가입,로그인,로그아웃, 팔로우 등의 작업을 하게 나눠놨는데

게시글 입력할때 mainPosts의 값이 추가될때마다 그 값이 컴포넌트에서 불러와져서

화면의 게시글 갯수 부분이 바뀌는건 이해가 가는데

// pages/index.ts

const Home = () => {
  const { mainPosts, hasMorePosts, loadPostLoading } = useSelector(
    (state: RootState) => state.post
  );


      {me && <PostForm />}
        {mainPosts.map((post) => (
          <PostCard key={post.id} post={post} />
        ))}

이 부분에서

/component/UserProfile.tsx


const UserProfile = () => {
  const { me, logOutLoading } = useSelector((state: RootState) => state.user);

 return (
    <>
      <Card
        actions={[
          <div key='twit'>
            짹짹
            <br />
            {me?.Posts.length}
          </div>,
          <div key='follower'>
            팔로워
            <br />
            {me?.Followings.length}
          </div>,
          <div key='following'>
            팔로잉
            <br />
            {me?.Followers.length}
          </div>,
        ]}
      >

me는 툴킷의 user.ts 의 me를 참조하는거 아닌가요?

게시글 입력,삭제시 post.ts를 통해 post.ts의 mainPosts 값이 바뀌는데

user.ts를 참조하는 컴포넌트에서 me.Posts.length 값이 바뀌는 부분이 잘 이해가 가질 않습니다.

그리고 댓글 삭제기능을 추가하고 싶은데요.

//pages/index.ts
 const { mainPosts, hasMorePosts, loadPostLoading } = useSelector(
    (state: RootState) => state.post
  );

    {mainPosts.map((post) => (
          <PostCard key={post.id} post={post} />
        ))}

//component/PostCard.tsx

  const { removePostLoading } = useSelector((state: RootState) => state.post);

  const onRemovePost = useCallback(() => {
    dispatch(removePostAction(post.id));
  }, []);

// post.ts

export const removePostAction = createAsyncThunk(
  '/post/delete',
  async (data: number) => {
    const response = await axios.delete(`/post/${data}`);
    return response.data;
  }
);

    .addCase(removePostAction.fulfilled, (draft, action) => {
        draft.removePostLoading = false;
        draft.removePostDone = true;
        draft.mainPosts = draft.mainPosts.filter(
          (v) => v.id !== action.payload
        );
      })




//back/routes/post

router.delete('/:postId', isLoggedIn, async (req, res, next) => {
  try {
    await Post.destroy({
      where: { id: req.params.postId, UserId: req.user.id },
    });
    res.status(200).json({ PostId: parseInt(req.params.postId, 10) });
  } catch (err) {
    console.error(err);
    next(err);
  }
});

게시글을 삭제할때는 post.id로 해당하는 글의 id를 바로 보내서 삭제할수 있는건

이해가 가는데 comment의 경우 [{댓글1}, {댓글2}] 형식으로 각 댓글의

값이 들어있어서 이부분을 어떻게 해야할지 감이 잡히지 않습니다.

//postcard

  renderItem={(item) => <CommentCard item={item} />}


//commentCard 

const CommentCard = ({ item }: CommentCardProp) => {
  const dispatch = useDispatch<AppDispatch>();

  const onRemoveComment = useCallback(() => {
    return dispatch(removeCommentAction({ commentId: item.id }));
  }, []);


로 값을 보내서 

export const removeCommentAction = createAsyncThunk(
  '/comment/delete',
  async (data: { commentId: number }) => {
    const response = await axios.delete(`/${data.commentId}/comment`);
    return response.data;
  }
);
   .addCase(removeCommentAction.fulfilled, (draft, action) => {
        draft.removeCommentLoading = false;
        draft.removeCommentDone = true;
       if (draft.mainPosts) {
          draft.mainPosts = draft.mainPosts.map((post) => ({
            ...post,
            Comments: post.Comments.filter(
              (comment) => comment.id !== action.payload
            ),
          }));
        }

툴킷에서 삭제하는 코드는 만들엇는데 



백엔드 쪽 강의 참고해서 

router.delete('/:postId', isLoggedIn, async (req, res, next) => {
  try {
    await Post.destroy({
      where: { id: req.params.postId, UserId: req.user.id },
    });
    res.status(200).json({ PostId: parseInt(req.params.postId, 10) });
  } catch (err) {
    console.error(err);
    next(err);
  }
});

// Post / comment/ 삭제

router.delete('/:commentId/comment', isLoggedIn, async (req, res, next) => {
  try {
    await Post.destroy({
      where: { id: req.params.commentId, UserId: req.user.id },
    });
    res.status(200).json({ commentId: parseInt(req.params.commentId, 10) });
  } catch (err) {
    console.error(err);
    next(err);
  }
});
위와 같이 만들긴 했는데요

// front

export const removeCommentAction = createAsyncThunk(
  '/comment/delete',
  async (data: number) => {
    const response = await axios.delete(`post/${data}/comment`);
    return response.data;
  }
);


    .addCase(removeCommentAction.fulfilled, (draft, action) => {
        draft.removeCommentLoading = false;
        draft.removeCommentDone = true;
        if (draft.mainPosts) {
          draft.mainPosts = draft.mainPosts.map((post) => ({
            ...post,
            Comments: post.Comments.filter(
              (v) => v.id !== action.payload.commentId
            ),
          }));
        }
      })

// back

router.delete('/:commentId/comment', isLoggedIn, async (req, res, next) => {
  try {
    await Post.destroy({
      where: { id: req.params.commentId, UserId: req.user.id },
    });
    res.status(200).json({ commentId: parseInt(req.params.commentId, 10) });
  } catch (err) {
    console.error(err);
    next(err);
  }
});