-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
제로초님 문의드립니다^^ 파라미터 있는 dispatch할 액션생성자 함수는 () 를 붙여야 되는건가요?
20.10.06 06:29 작성 조회수 250
0
제로초님 ^^ 명강의 잘듣고 있습니다..
다름이 아니라요 현재 3-6장 react-redux 훅 사용하기 강의 듣고있습니다.
그런데 아래와 같은 에러가 발생해서요
그래서 이전 제로초님 질문답변 확인한 결과 loginAction은 함수라고 하셨는데요
아마도 파라미터가 있어서 그런거같은데요 그 질문답변에서는 파라미터를 넣으라고 하셨는데
전그냥 () 마 붙이니깐 되더라구요
그런데 강의내용에서는 그런에러가 없이 통과된거같아서요
파라미터 있는 dispatch할 액션생성자 함수는 () 를 붙여야 되는건가요?
참고로 제 소스를 에러 아래에 첨부합니다 (강의 주석이 많아서 죄송합니다)
Error: Actions must be plain objects. Use custom middleware for async actions.
<button style="color:#293238;cursor:pointer;display:block;width:568px;text-align:left;background:#ffffff;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;margin-bottom:1.5em;border:initial none initial">▶ 3 stack frames were collapsed.</button>
(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;
답변을 작성해보세요.
1
조현영
지식공유자2020.10.06
dispatch에는 객체만 들어가야 합니다. loginAction이 객체를 리턴하는 함수이니 로그인액션을 호출해야 리턴값인 함수가 dispatch에 들어가겠죠?
0
답변 2