-
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
툴킷으로 만들어보는중 막히는부분 질문드립니다.
23.09.01 18:21 작성 조회수 325
0
리덕스, 사가를 사용할때는
리덕스 -> 사가 -> 리덕스 순으로 값이 전해져서 게시글을 추가할때마다
게시글 개수가 올라가는 흐름을 툴킷을 적용해서 하려고 하니깐 막혀서
어떻게 해야할지 질문드립니다.
코드는 다음과 같이 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 값을 어떻게 변경해줘야 할지를 잘 모르겠어서 질문드립니다.
답변을 작성해보세요.
0
조현영
지식공유자2023.09.01
현재 post reducer에서만 작업이 일어나고 있으므로 user action을 하나 더 만들어서 dummyUser의 post 개수를 1 올려주어야 합니다. 즉, 게시글 작성 시 액션을 두 번 호출하는 것이죠.
ㅇㅅㅇ?
질문자2023.09.01
제로초님 알려주신대로
// 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에서 받은 값이여서 이 부분을 어떻게 해야할지 문의드립니다.
답변 1