props.dispatch is not a function 오류

[김건엽]

안녕하세요, 강사님!
"세계최고로 쉬운 Redux 4 : dispatch할 때 데이터 실어보낼 수 있음" 강의에서 몇 시간째 헤매고 있어서 여쭤봅니다.

주문하기 눌렀을 때 TypeError: props.dispatch is not a function at onClick (Detail.js:65:1)와 같이 나오면서 에러가 나옵니다.(참고로 그전 강의 장바구니 수량증감에서 dispatch 썼을 때는 잘 됐습니다.)
detail.js에서 app.js로 export/import하는게 문제 인가 싶어서 app.js에서 

원래 import {Detail, MyAlert} from './Detail.js'; 로 씌여있던 것을

import Detail from './Detail.js' 로 바꾸보기도 했는데 이 경우에는 주문하기를 눌러도 아무런 반응이 없었고 console에서도 dispatch로 보낸 reducer가 array로 확인되지 않았습니다.

아래 코드 확인하고 해결방안 알려주시면 너무나 감사할 것 같습니다.

<Detail.js>

생략~

<inventoryContext.Provider value={inventory}>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{shoe.title}</h4>
<p>{shoe.content}</p>
<p>{shoe.price}</p>
<Info inventory={props.inventory}></Info>
 
<strong><button className="btn btn-danger" onClick={()=>{</strong>
props.inventorySet([9, 11, 12]);
<strong>props.dispatch({type: '항목추가', payload:{id:2, name:'새상품', quan:4}});</strong>
<strong>}}>주문하기</button></strong>
<button className="btn btn-danger" onClick={()=>{history.goBack()}}>뒤로가기</button>
<button className="btn btn-danger" onClick={()=>{history.push('/')}}>홈화면</button>
</div>
</inventoryContext.Provider>

생략~

function 함수명(state){
 
return{
state: state.reducer,
alertopen: state.reducer2
}

}
export default connect(함수명)(Detail)
export {Detail, MyAlert};
 

 

<index.js>

let defState = [
{id:0, name:'멋진신발', quan: 2},
{id: 1, name: '빨간신발', quan: 4},
{id: 2, name: '아뵤신발', quan: 2}
]

function reducer(state=defState, action){
if (action.type === '항목추가') {

let copy = [...state];
copy.push(action.payload);
return copy;
}
else if(action.type==='수량증가'){

let copy =[...state];
copy[0].quan++;
return copy
}
else if(action.type==='수량감소'){

let copy =[...state];
copy[0].quan--;
return copy

}
else{
return state
}
 

 

<App.js>

import logo from './logo.svg';
import {Nav, Navbar, Container, NavDropdown } from 'react-bootstrap'
import './App.css';
import { useContext, useState } from 'react';
import Data from './data.js';
import { Link, Route, Switch} from 'react-router-dom';
// import {Detail} from './Detail.js';
<strong>import {Detail, MyAlert} from './Detail.js';</strong>
import axios from 'axios';
import React from 'react';
import ReactDOM from 'react-dom';
import Cart from './Cart.js';
import {connect} from 'react-redux';
//import Detail from './Detail.js'

 

 

[codingapple]

컴포넌트가 많거나 그러면 다음강의에 나오는 useDispatch 쓰면 쉽게 해결됩니다 

[글쓴이]

글