Redux 4 강의: 버튼을 눌러도 콘솔에 내용이 안 나옵니다.

[김혜수]

안녕하세요

주문하기 버튼을 누르면

선생님 화면처럼 콘솔에 {reducer:array .. 이런식으로 항목이 나와야 하는데

눌러도 아무 항목도 안 나오고, Cart.js 에서도 항목에 변화가 없습니다.

어디를 봐야 할까요 ..?

 

cart.js 

import React from "react";
import { Table } from "react-bootstrap";
import { connect } from "react-redux";

function Cart(props) {
return (
<div>
<div>
<Table responsive="sm">
<thead>
<tr>
<th>#</th>
<th>상품명</th>
<th>수량</th>
<th>변경</th>
</tr>
</thead>
<tbody>
{props.state.map((a, i) => {
return (
<tr key={i}>
<td>{a.id}</td>
<td>{a.name}</td>
<td>{a.quan}</td>
<td>
<button
onClick={() => {
props.dispatch({
type: "plus",
payload: { name: "kim" },
});
}}
>
+
</button>
<button
onClick={() => {
props.dispatch({ type: "minus" });
}}
>
-
</button>
</td>
</tr>
);
})}
</tbody>
</Table>
{props.alertCheck === true ? (
<div className="my-alert2">
<p>지금 구매하시면, 신규할인 10%!</p>
<button
onClick={() => {
props.dispatch({ type: "alertClose" });
}}
>
닫기
</button>
</div>
) : null}
</div>
</div>
);
}
function stateToProps(state) {
return {
state: state.reducer,
alertCheck: state.reducer2,
};
}
export default connect(stateToProps)(Cart);

 

그리고 index.js

 

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { combineReducers, createStore } from "redux";

//cart.js 알람화면
let alertInitialValue = true;
function reducer2(state = alertInitialValue, action) {
if (action.type === "alertClose") {
state = false;
return state;
} else {
return state;
}
}

//Reducer 초기값
let InitialValue = [
{ id: 0, name: "귀여운 인형", quan: 2 },
{ id: 1, name: "네오 인형", quan: 1 },
];

function reducer(state = InitialValue, action) {
if (action.type === "AddItem") {
let copy = [...state];
copy.push(action.payload);
return copy;
} else if (action.type === "plus") {
let copy = [...state];
copy[0].quan++;
return copy;
} else if (action.type === "minus") {
let copy = [...state];
copy[0].quan--;
return copy;
} else {
return state;
}
}
let store = createStore(combineReducers({ reducer, reducer2 }));

ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

그리고 Detail.js 입니다 

 

import React, { useState, useEffect } from "react";
import { useHistory, useParams } from "react-router-dom";
import styled from "styled-components";
import "./Detail.scss";
import { StockContext } from "./App.js";
import { Nav } from "react-bootstrap";
import { CSSTransition } from "react-transition-group";
import { connect } from "react-redux";

let box = styled.div`
padding-top: 30px;

;
let product_title = styled.h4

font-size: 25px;
`;
function Detail(props) {
let

= useState(true);
let [inputData, inputDataChange] = useState("");
let [tab, tabChange] = useState(0);
let [aniSwitch, aniSwitchChange] = useState(false);

useEffect(() => {
let Timer = setTimeout(() => {
alertChange(false);
}, 2000);
},

); //항상 업데이트될때 실행하지 말고, alert state가 업데이트 될때만 실행한다.

let { id } = useParams();
let history = useHistory();
let FoundProduct = props.doll.find((x) => x.id == id);

return (
<div className="container">
<box>
<product_title className="red">Detail</product_title>
</box>
{inputData}
<input
onChange={(e) => {
inputDataChange(e.target.value);
}}
/>
{alert === true ? (
<div className="my-alert2">
<p>인기상품! 재고가 얼마 남지 않았어요!</p>
</div>
) : null}

<div className="row">
<div className="col-md-6">
<img
src="https://codingapple1.github.io/shop/shoes1.jpg"
width="100%"
/>
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{FoundProduct.title}</h4>
<p>{FoundProduct.content}</p>
<p>{FoundProduct.price}원</p>
<StockInfo Stock={props.Stock}></StockInfo>
<button
className="btn btn-danger"
onClick={() => {
props.StockChange([9, 11, 12]);
props.dispatch({
type: "AddItem",
payload: { id: 2, name: "새로운 인형", quan: 1 },
});
//history.push("/cart");
}}
>
주문하기
</button>
&nbsp;
<button
className="btn btn-danger"
onClick={() => {
history.goBack();
}}
>
뒤로가기
</button>
</div>
</div>
<Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
<Nav.Item>
<Nav.Link
eventKey="link-0"
onClick={() => {
aniSwitchChange(false);
tabChange(0);
}}
>
Active
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
eventKey="link-1"
onClick={() => {
aniSwitchChange(false);
tabChange(1);
}}
>
Option 1
</Nav.Link>
</Nav.Item>
</Nav>
<CSSTransition in={aniSwitch} classNames="ani" timeout={500}>
<TabContent tab={tab} aniSwitchChange={aniSwitchChange} />
</CSSTransition>
</div>
);
}
function TabContent(props) {
useEffect(() => {
props.aniSwitchChange(true);
});

if (props.tab === 0) {
return <div>0번째 내용</div>;
} else if (props.tab === 1) {
return <div>1번째 내용</div>;
} else if (props.tab === 2) {
return <div>2번째 내용</div>;
}
}

function StockInfo(props) {
return <p>재고:{props.Stock[0]}</p>;
}

function stateToProps(state) {
return {
state: state.reducer,
alertCheck: state.reducer2,
};
}
export default connect(stateToProps)(Detail);

 

 

 

[codingapple]

console.log를 아무데도 작성안하신듯한데요

[글쓴이]

글