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

안녕하세요. 항상 좋은 강의를 해주셔서 감사합니다.

다름이 아니라 글 작성시 콘솔에 ADD_POST_REQUEST에 대한 리듀서 작동은 확인했으나 그 뒤에 addPost 사가가 작동하지 않는 것에 대해 질문이 있습니다.

위 문제는 watchAddPost()가 정상적으로 ADD_POST_REQUEST에 대한 이벤트를 캐치하지 못 해서 다음 과정이 진행되지 않는 것이라고 생각합니다. 다만 콘솔에서는 이에 대한 것도 뜨지 않아 해당 오류를 해결하기 어려워 질문 드립니다.

다음은 제가 작성한 코드입니다. ()

@/component/PostFrom.js

const PostForm = () => {
  const dispatch = useDispatch();
  const { imagePaths, addPostDone } = useSelector((state) => state.post);
  const [text, onChangeText, setText] = useInput("");

  const onSubmit = useCallback(() => {
    dispatch(addPostRequestAction(text));
  }, [text]);

  ...
}

@/reducer/post.js

export const initialState = {
  mainPosts: [...],
  ...
  addPostLoading: false,
  addPostDone: false,
  addPostError: null
}

export const ADD_POST_REQUEST = "ADD_POST_REQUEST";
export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS";
export const ADD_POST_FAILURE = "ADD_POST_FAILURE";

export const addPostRequestAction = (data) => ({
  type: ADD_POST_REQUEST,
  data,
});

const dummyPost = (data) => ({
  id: 2,
  content: data,
  User: {
    id: 1,
    nickname: "윤섭",
  },
  Images: [],
  Comments: [],
});

const reducer = (state: initialState, action) => {
  switch (action.type) {
    case ADD_POST_REQUEST:
      console.log("REDUCER: ADD_POST_REQUEST");
      return {
        ...state,
        addPostLoading: true,
        addPostDone: false,
        addPostError: null,
      };
    case ADD_POST_SUCCESS:
      console.log("REDUCER: ADD_POST_SUCCESS");
      return {
        ...state,
        mainPosts: [dummyPost(action.data), ...state.mainPosts],
        addPostLoading: false,
        addPostDone: true,
      };

     ...

  }
}

@/sagas/post.js

import { all, fork, delay, put, takeLatest } from "redux-saga/effects";
import axios from "axios";
import {
  ADD_POST_REQUEST,
  ADD_POST_SUCCESS,
  ADD_POST_FAILURE,
  ADD_COMMENT_REQUEST,
  ADD_COMMENT_SUCCESS,
  ADD_COMMENT_FAILURE,
} from "@/reducers/post";

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

function* addPost(action) {
  try {
    // const result = yield call(addPostAPI);
    yield delay(1000);
    console.log("SAGA: addPost");
    yield put({
      type: ADD_POST_SUCCESS,
      data: action.data,
    });
  } catch (err) {
    yield put({
      type: ADD_POST_FAILURE,
      error: err.response.data,
    });
  }
}

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

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

아래는 ADD_POST_REQUEST 이후 아무런 반응이 없는 스크린샷입니다.