제로초님 문의드립니다^^ 파라미터 있는 dispatch할 액션생성... - 인프런

제로초님 ^^ 명강의 잘듣고 있습니다..

다름이 아니라요 현재 3-6장 react-redux 훅 사용하기 강의 듣고있습니다.

그런데 아래와 같은 에러가 발생해서요

그래서 이전 제로초님 질문답변 확인한 결과 loginAction은 함수라고 하셨는데요

아마도 파라미터가 있어서 그런거같은데요 그 질문답변에서는 파라미터를 넣으라고 하셨는데

전그냥 () 마 붙이니깐 되더라구요

그런데 강의내용에서는 그런에러가 없이 통과된거같아서요

파라미터 있는 dispatch할 액션생성자 함수는 () 를 붙여야 되는건가요?

참고로 제 소스를 에러 아래에 첨부합니다 (강의 주석이 많아서 죄송합니다)

Error: Actions must be plain objects. Use custom middleware for async actions.

(anonymous function)
./pages/index.js:30
  27 |  },
  28 |  }); */
  29 |  //2th방법)
> 30 |  dispatch(loginAction); //Error: Actions must be plain objects. Use custom middleware for async actions.
  | ^  31 |  //dispatch(loginAction());
  32 |  dispatch(logoutAction); //useState내 setState역할
 33 | },[])
import React, { useEffect } from 'react';
import PostForm from '../components/PostForm';
import PostCard from '../components/PostCard';
import { useDispatch, useSelector } from 'react-redux';   //useDispatch : 리덕스 action type 실행
                                                          //useSelector : 리덕스 state 가져옴

//import user, { LOG_IN, LOG_OUT } from '../reducers/user';    //user 리듀서에서 LOG_IN 이라는 액션타입을 불러온다
import { loginAction, logoutAction } from '../reducers/user';    //2th방법)



const Home = () => {    //컴포넌트가 첫번째로 렌더링 될때 액션도 dispatch가 실행된다

  const dispatch = useDispatch();
  useEffect(() => {   //리액트 리덕스가 훅을 지원하지 않다가 추가적으로 지원하게 됨 
    /*
    dispatch({
      type: LOG_IN,   //액션타입
      data: {
        nickname: '홍길동',
      },
    });
    dispatch({
      type: LOG_OUT,   //액션타입
      data: {
        nickname: '홍길동',
      },
    });  */
    //2th방법)
    dispatch(loginAction);   //Error: Actions must be plain objects. Use custom middleware for async actions.
    //dispatch(loginAction());
    dispatch(logoutAction);   //useState내 setState역할
  },[])

  //구조분해
  //const { user, isLoggedIn } = useSelector(state => state.user);    //user 는 user 모듈, 리듀서의 별칭 === reducer > index.js 내 combineReducers({리듀서1, 리듀서2})
  //리렌더링 성능최적화를 고려해서 세부분리시킴 => 구조분해 필요없음 {} 제거시켜야함
  const user  = useSelector(state => state.user.user);
  const isLoggedIn  = useSelector(state => state.user.isLoggedIn);
  const { mainPosts } = useSelector(state => state.post);     //비구조 할당 {상태값1, 상태값2} = useSelector(state => state.리듀서별칭);
  //useState === useSelector
  
  //리덕스 state를 컴포넌트내에서 사용하는 방법
  //1th방법)
  //{user.user ? <div> 로그인 했습니다: {user.nickname}</div> : <div>로그아웃 했습니다</div>}   //user 모듈,리듀서 별칭 + user 객체
  return (
    <div>
      {user ? <div> 로그인 했습니다: {user.nickname}</div> : <div>로그아웃 했습니다</div>}
      {isLoggedIn && <PostForm />}
      {mainPosts.map((c) => {
        return (
          <PostCard key={c} post={c} />
        );
      })}
    </div>
  );

};

export default Home;

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

제로초님 문의드립니다^^ 파라미터 있는 dispatch할 액션생성자 함수는 () 를 붙여야 되는건가요?