[해결 방법] Actions must be plain objects. Use custom middleware for async actions.

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

발생 Error

React에서 다음 Source Code를 실행할 경우,

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의 매개변수를 객체로 선언

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;