[React]Error: Actions must be plain objects. Use custom middleware for async actions.(redux-toolkit unwrap 사용시 에러)

redux-toolkit unwrap을 사용하는 도중 위와 같은 에러가 발생했다.

unwrap을 사용하지 않아도 참고할수 있는 예제라고 생각한다.

생각보다 바보 같은 실수였는데, 독자분들이 하단에서 이유를 찾을수도 있을 것 같다.

오류 부분은 표시 해두었으니 직접 찾아보아도 되고 다음 블럭으로 넘어가도 좋다.

///////1.오류발생
import React from "react";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import {
  deletePosting,
  getPostingReadCount,
} from "../../../../features/app/postingSlice";
const HomeBookList = ({ el }) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const deletePosting = async (postingId) => { //해당부분에서 오류발생
    try {
      const param = {
        id: postingId,
      };
      const result = await dispatch(deletePosting(param)).unwrap();
      if (result.ok) {
        alert("선택하신 포스팅이 삭제되었습니다.");
        let param = {
          userId: rootUserId,
          readCount: tabName === "1회독 진행" ? 1 : 0,
        };
        dispatch(getPostingReadCount(param));
      }
      console.log(result);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div className=" cursor-pointer border border-gray-600 rounded-xl p-3 flex justify-between gap-x-3 items-center">
      <div
        className="flex items-center gap-x-4"
        onClick={() => {
          navigate("/addbook", { state: [el, "mybook"] });
        }}
      >
        <img
          src={el.image}
          alt="img"
          className="rounded-xl w-[40px] h-[40px] border"
        />
        <div>
          <span>{el.title} /</span>
          <span>
            {el.untilPage} /{el.totalPage} / {el.readCount}회독
          </span>
        </div>
      </div>

      <span
        className=" border rounded-full"
        onClick={() => deletePostingId(el.id)}
      >
        del
      </span>
    </div>
  );
};

export default HomeBookList;

원인은 slice에서 사용한 function의 이름과 컴퍼넌트 페이지 안에서 사용한 function의 이름이 동일하기 때문에 생긴 오류였다.

즉, 같은 함수를 두번 불러오는 현상을 초래했기 때문에 위와 같은 에러 문구가 발생한 것 이다.

물론 많은 경우의 수가 있겠지만, 비슷한 상황은 아닌지 한번 더 체크 해보면 도움이 될 듯하다!

///////2.오류해결
import React from "react";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import {
  deletePosting,
  getPostingReadCount,
} from "../../../../features/app/postingSlice";
const HomeBookList = ({ el }) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const deletePostingId = async (postingId) => { //오류 해결 : slice에서 설정한 function 이름과, 페이지 내에서 사용한 function이름이 동일하여 생긴 문제 
    try {
      const param = {
        id: postingId,
      };
      const result = await dispatch(deletePosting(param)).unwrap();
      if (result.ok) {
        alert("선택하신 포스팅이 삭제되었습니다.");
        let param = {
          userId: rootUserId,
          readCount: tabName === "1회독 진행" ? 1 : 0,
        };
        dispatch(getPostingReadCount(param));
      }
      console.log(result);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div className=" cursor-pointer border border-gray-600 rounded-xl p-3 flex justify-between gap-x-3 items-center">
      <div
        className="flex items-center gap-x-4"
        onClick={() => {
          navigate("/addbook", { state: [el, "mybook"] });
        }}
      >
        <img
          src={el.image}
          alt="img"
          className="rounded-xl w-[40px] h-[40px] border"
        />
        <div>
          <span>{el.title} /</span>
          <span>
            {el.untilPage} /{el.totalPage} / {el.readCount}회독
          </span>
        </div>
      </div>

      <span
        className=" border rounded-full"
        onClick={() => deletePostingId(el.id)}
      >
        del
      </span>
    </div>
  );
};

export default HomeBookList;