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

ㅇㅅㅇ?

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

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

해결된 질문

작성

418

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

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

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

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

코드는 다음과 같이 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 값을 어떻게 변경해줘야 할지를 잘 모르겠어서 질문드립니다.

react redux node.js express next.js

답변 1

제로초(조현영)

지식공유자

현재 post reducer에서만 작업이 일어나고 있으므로 user action을 하나 더 만들어서 dummyUser의 post 개수를 1 올려주어야 합니다. 즉, 게시글 작성 시 액션을 두 번 호출하는 것이죠.

ㅇㅅㅇ?

질문자

제로초님 알려주신대로

// 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]);

게시글 추가할때마다 post action, user action 두가지로 해서

게시글이 추가될때마다

추가되고 추가된만큼 증가하는건 했는데요

반대로 삭제하기위해선 어떻게 하는게 좋은가요??

객체로 nanoid로 각각 id를 만들어서 보내주긴하는데

// 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));
  }, []);

postcard에서 받는 값은 post에서 받은 값이여서 이 부분을 어떻게 해야할지 문의드립니다.

제로초(조현영)

지식공유자

배열의 filter로 해당하는 id를 걸러내시면 됩니다.

ㅇㅅㅇ?

작성한 질문수

전체 Q&A

질문하기