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

안녕하세요 제로초님

여쭤보고 싶은게 있습니다.

강의를 따라가다가 데브툴에서 액션, 데이터들을 확인하시는 모습을 봤는데,

저도 따라해보니 액션명칭도, state tree의 데이터들도 제대로 안나오는것 같더라구요.

그래서 좀 테스트해보니까

아래의 로직처럼
put에 액션 함수를 실행하면 데브툴에서 액션 명칭니 나오고예시: put(액션명(데이터)),
기존처럼

put({type: 액션명, payload: 데이터}) 호출하게되면
undefined로 나오는것 같습니다.

function* addPost(action) {
   try {
	yield delay(1000);
	const id = shortid.generate();
	yield put(addPostSuccessAction({
				id,
				content: action.payload.text,
			})
		);
		yield put({ type: addPostToMe, payload: id });
	} catch (err) {
		yield put({ type: addPostFailureAction, error: err.response.data });
	}
}

아무래도 toolkit과 saga를 사용할때 저렇게 사용하는게 아닌가 싶은데
undefined로 나오는 부분은 개선했다고 하더라도

action 부분이 제로초님과 다르게 나오더라구요.

액션명만 나오는게 아니라 reducer의 위치도 함께나온느데

이렇게 나와도 괜찮은건지 여쭙고 싶습니다.

다른 부분은 잘 작동하는것 같습니다.

import { HYDRATE } from "next-redux-wrapper";
import { createSlice } from "@reduxjs/toolkit";
import shortId from "shortid";

export const initialState = {
	mainPosts: [
		{
			id: "1",
			User: {
				id: "1",
				nickname: "zzimzzim",
			},
			content: "첫 번째 게시글 #해시태그, #익스프레스",
			Images: [
				{
					id: shortId.generate(),
					src: "https://loremflickr.com/cache/resized/65535_53669042936_630c778818_320_240_nofilter.jpg",
				},
				{
					id: shortId.generate(),
					src: "https://loremflickr.com/cache/resized/65535_52982053835_12fc661207_320_240_nofilter.jpg",
				},
				{
					id: shortId.generate(),
					src: "https://loremflickr.com/cache/resized/65535_52905479084_303bf25ec0_320_240_nofilter.jpg",
				},
			],
			Comments: [
				{
					id: shortId.generate(),
					User: {
						nickname: "찜찜",
					},
					content: "얼른 사고싶어요~",
				},
				{
					id: shortId.generate(),
					User: {
						nickname: "hero",
					},
					content: "리액트 넥스트 고수가 될테다~",
				},
			],
			createdAt: {},
		},
	],
	imagePaths: [],
	addPostLoading: false,
	addPostDone: false,
	addPostError: null,
	addCommentLoading: false,
	addCommentDone: false,
	addCommentError: null,
};

const dummyPost = ({ id, content }) => {
	return {
		id,
		content,
		User: {
			id: "1",
			nickname: "WlaWla",
		},
		Images: [],
		Comments: [],
	};
};

const dummyComment = (content) => ({
	id: shortId.generate(),
	content: content,
	User: {
		id: "1",
		nickname: "WlaWla",
	},
});

const postSlice = createSlice({
	name: "post",
	initialState,
	reducers: {
		addPostRequestAction: (state, action) => {
			state.addPostLoading = true;
			state.addPostDone = false;
			state.addPostError = null;
		},
		addPostSuccessAction: (state, action) => {
			state.addPostLoading = false;
			state.addPostDone = true;
			state.mainPosts.unshift(dummyPost(action.payload));
		},
		addPostFailureAction: (state, action) => {
			state.addPostLoading = false;
			state.addPostError = action.error;
		},
		addCommentRequestAction: (state, action) => {
			state.addCommentLoading = true;
			state.addCommentDone = false;
			state.addCommentError = null;
		},
		addCommentSuccessAction: (state, action) => {
			const { content, userId, postId } = action.payload;
			const post = state.mainPosts.find((d) => d.id === postId);
			post.Comments.unshift(dummyComment(content));
			state.addCommentLoading = false;
			state.addCommentDone = true;
		},
		addCommentFailureAction: (state, action) => {
			state.addCommentLoading = false;
			state.addCommentError = action.error;
		},
	},
	extraReducers: (builder) =>
		builder
			.addCase(HYDRATE, (state, action) => ({
				...state,
				...action.payload.post,
			}))
			.addDefaultCase((state) => state),
});

export const { addPostRequestAction, addPostSuccessAction, addPostFailureAction, addCommentRequestAction, addCommentSuccessAction, addCommentFailureAction } = postSlice.actions;
export default postSlice.reducer;

사가 코드입니다.

import { all, fork, delay, put, takeLatest } from "redux-saga/effects";
import axios from "axios";
import { addPostRequestAction, addPostSuccessAction, addPostFailureAction, addCommentRequestAction, addCommentSuccessAction, addCommentFailureAction } from "../reducers/post";
import { addPostToMe, removePostOfMe } from "../reducers/user";
import shortid from "shortid";

function addPostAPI(data) {
	return axios.post("/api/post/", data);
}

function* addPost(action) {
	try {
		// const result = yield call(addPostAPI, action.data);
		console.log("addPost saga", action);
		yield delay(1000);
		const id = shortid.generate();
		yield put(
			addPostSuccessAction({
				id,
				content: action.payload.text,
			})
		);
		yield put({ type: addPostToMe, payload: id });
	} catch (err) {
		yield put({ type: addPostFailureAction, error: err.response.data });
	}
}

function addCommentApi(data) {
	return axios.post(`/api/post/${data.postId}/comment`);
}
function* addComment(action) {
	try {
		// const result = yield call(addPostAPI, action.data);
		console.log("addComment saga", action);
		yield delay(1000);
		yield put({
			type: addCommentSuccessAction,
			payload: action.payload,
		});
	} catch (err) {
		console.log(err);
		yield put({
			type: addCommentFailureAction,
			error: err.response.data,
		});
	}
}

function* watchAddPost() {
	yield takeLatest(addPostRequestAction, addPost);
}

function* watchAddComment() {
	yield takeLatest(addCommentRequestAction, addComment);
}

export default function* postSaga() {
	yield all([fork(watchAddPost), fork(watchAddComment)]);
}