툴킷으로 만들어보는중 막히는부분 질문드립니다.

리덕스, 사가를 사용할때는

리덕스 -> 사가 -> 리덕스 순으로 값이 전해져서 게시글을 추가할때마다

게시글 개수가 올라가는 흐름을 툴킷을 적용해서 하려고 하니깐 막혀서

어떻게 해야할지 질문드립니다.

코드는 다음과 같이 post.ts

// post.ts


export const addPostAction = createAsyncThunk('/post', async (data: string) => {
  const addPost = dummyPost(data);
  await delay(1000);
  return addPost;
});

// 게시글 삭제

export const removePostAction = createAsyncThunk(
  '/post/delete',
  async (data: string) => {
    await delay(1000);
    return data;
  }
);


  // 게시글 추가
      .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;
      })

user.ts

// user.ts



const dummyUser = (data: LoginData): DummyData => ({
  ...data,
  nickname: '제로초',
  id: 1,
  Posts: [{ id: 1 }],
  Followings: [
    { id: 2, nickname: '김' },
    { id: 3, nickname: '이' },
    { id: 4, nickname: '박' },
  ],
  Followers: [{ nickname: '김' }, { nickname: '박' }, { nickname: '이' }],
});



const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    addPostTome(draft, action) {
      draft.me?.Posts.unshift({ id: action.payload });
    },
    removePostOfMe(draft, action) {
      if (draft.me) {
        draft.me.Posts = draft.me?.Posts.filter((v) => v.id !== action.payload);
        console.log(draft.me);
      }
    },
  },

로 구분을 했고

게시글 추가, 삭제는 정상적으로 작동하는데

이때 user.ts의 dummyUser 값을 어떻게 변경해줘야 할지를 잘 모르겠어서 질문드립니다.

// user.ts


// 게시글 추가

export const addPostToMe = createAsyncThunk(
  '/user/add',
  async (data: string) => {
    const PostId = nanoid();
    const userAdd = { data, PostId };
    await delay(1000);
    return userAdd;
  }
);

// 게시글 삭제

export const removePostOfMe = createAsyncThunk(
  '/user/remove',
  async (data: string) => {
    await delay(1000);
    return data;
  }
);


extraReducers: (build) => {
    build
      // 게시글 추가
      .addCase(addPostToMe.pending, (draft) => {
        draft.addPostLoading = true;
        draft.addPostDone = false;
        draft.addPostError = null;
      })
      .addCase(addPostToMe.fulfilled, (draft, action) => {
        draft.addPostLoading = false;
        draft.me?.Posts.unshift(action.payload);
      })
      .addCase(addPostToMe.rejected, (draft, action) => {
        draft.addPostLoading = false;
        draft.addPostError = action.error.message;
      })
      //게시글 삭제
      .addCase(removePostOfMe.pending, (draft) => {
        draft.removePostLoading = true;
        draft.removePostDone = false;
        draft.removePostError = null;
      })
      .addCase(removePostOfMe.fulfilled, (draft, action) => {
        draft.removePostLoading = false;
        draft.removePostDone = true;
        if (draft.me?.Posts) {
          draft.me.Posts = draft.me?.Posts.filter(
            (v) => v.id !== action.payload
          );
        }
      })




// PostForm.tsx


  const onSubmit = useCallback(() => {
    dispatch(addPostAction(text));
    dispatch(addPostToMe(text));
    setText('');
  }, [text]);

// PostCard.tsx

const PostCard = ({ post }: PostCardProp) => {


  const id = useSelector((state: RootState) => state.user.me?.id);

  const { removePostLoading } = useSelector((state: RootState) => state.post);
  const dispatch = useDispatch<AppDispatch>();



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