⚛️ 기본 환경: IDE: VS code, Language: React
발생 Error
React에서 다음 Source Code를 실행할 경우,
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { cat, chick, dog, tiger } from '../../store/modules/animal';
const Animal = () => {
const name = useSelector(state => state.animal.name);
// animal reducer 안의 name
const crying = useSelector(state => state.animal.crying);
const dispatch = useDispatch(); // action을 발생시키는 함수
return (
<div>
<h1>동물의 울음소리</h1>
<h1>{name} : {crying}</h1>
<p>
<button onClick={() => dispatch(tiger)}>호랑이</button>
{/*
dispatch(tiger): →
index.js →
export const tiger = () => ({type: TIGER});
*/}
<button onClick={() => dispatch(dog)}>강아지</button>
<button onClick={() => dispatch(cat)}>고양이</button>
<button onClick={() => dispatch(chick)}>병아리</button>
</p>
</div>
);
};
export default Animal;
|
🚨 다음과 같은 오류 발생
Actions must be plain objects. Use custom middleware for async actions.
발생 원인
dispatch의 매개변수로 함수 포인터를 선언
해결 방법
dispatch의 매개변수를 객체로 선언
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { cat, chick, dog, tiger } from '../../store/modules/animal';
const Animal = () => {
const name = useSelector(state => state.animal.name);
// animal reducer 안의 name
const crying = useSelector(state => state.animal.crying);
const dispatch = useDispatch(); // action을 발생시키는 함수
return (
<div>
<h1>동물의 울음소리</h1>
<h1>{name} : {crying}</h1>
<p>
<button onClick={() => dispatch(tiger())}>호랑이</button>
{/*
dispatch(tiger): →
index.js →
export const tiger = () => ({type: TIGER});
*/}
<button onClick={() => dispatch(dog())}>강아지</button>
<button onClick={() => dispatch(cat())}>고양이</button>
<button onClick={() => dispatch(chick())}>병아리</button>
</p>
</div>
);
};
export default Animal;
|