리덕스 장바구니 숙제

[박상국]

'store.js'파일 안에 장바구니 내용물 정보가 들어갈 cart 스테이트를 만들고
그 cart 스테이트를 'Cart.js'로 가져와
'Cart.js' 파일에 장바구니 페이지에 쓰일 Cart 컴포넌트를 만들었습니다.
그리고 'detail.js' 파일 안에, 메인화면에서 제품명을 누르면 보이는, 디테일 카드 컴포넌트 DetialCard를 만들었고
DetailCard 컴포넌트 내의 '주문하기' 버튼을 누르면 cart 스테이트가 변경이 되도록 만들었습니다.

그런데 detail 페이지에서 cart 스테이트를 출력해 봤을 땐 cart 스테이트가 변경이 되어 출력되는 반면에
장바구니 페이지에선 변경이 되지 않습니다.
이유를 모르겠습니다.

사진으로 첨부하려 해봤지만 오류가 나서 부득이하게 붙여넣기하여 올립니다, 죄송합니다.





<<<<<<store.js>>>>>>

import { configureStore, createSlice } from '@reduxjs/toolkit'

let cart = createSlice({
name: 'cart',
initialState : [
 {id : 0, name : 'White and Black', count : 2},
 {id : 2, name : 'Grey Yordan', count : 1}
 ],
reducers : {
setCart(state, action) {
let num = state.findIndex((a) => {
return (
a.id == action.payload
 )
 })
state[num].count += 1;
 },
pushCart(state, action) {
// state.push(action.payload)
return (
 [...state, action.payload]
 )
 }
 }
})

export let {setCart, pushCart} = cart.actions

export default configureStore({
reducer: { 
cart : cart.reducer
 }
}) 







<<<<<<Cart.js>>>>>>

import {Table} from 'react-bootstrap'
import {useDispatch, useSelector} from 'react-redux'
import { setCart } from '../store/store.js'

function Cart() {

let cart = useSelector((cart) => {
return cart
 })

console.log (cart)

return (
<>
<Table>
<thead>
<tr>
<th>#</th>
<th>상품명</th>
<th>수량</th>
<th>변경하기</th>
</tr>
</thead>
<tbody className = "cart-setname">
{
cart.cart.map(function(a, i){
return ( 
<CartEle id = {i}/>
 )
 })
}
</tbody>
</Table>
</>
 )
}

function CartEle(props) {

let cart = useSelector((cart) => {
return cart
 })
let dispatch = useDispatch()

return (
<tr key = {props.id}>
<td>{cart.cart[props.id].id}</td>
<td>{cart.cart[props.id].name}</td>
<td>{cart.cart[props.id].count}</td>
<td>
<button onClick={() => {
dispatch(setCart(cart.cart[props.id].id))
 }}>+</button>
</td>
</tr>
 )
}

export default Cart

<<<<<<detail.js>>>>>>

import { useContext, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Nav } from "react-bootstrap";
import { Context1 } from "./../App.js"
import { setCart, pushCart } from '../store/store.js'
import { useDispatch, useSelector } from 'react-redux'

function DetailCard(props) {

let {id} = useParams();
let idNum = Number(id);
let photoId = idNum + 1 ;
let found = props.shoes.find(function(a){
return a.id == id
 })
let [detailTab, setDetailTab] = useState(0);
let [fade, setFade] = useState('');
let cart = useSelector((cart) => {
return cart
 })
let dispatch = useDispatch()

useEffect ( () => {
setFade('end')
 }, [])

return (
<div className = {'start ' + fade}>
<div className="container">
<div className="row">
<div className="col-md-6">
< img src={'https://codingapple1.github.io/shop/shoes'+ photoId +'.jpg'} width="100%" />
</div>
<div className="col-md-6">
<h4 className="pt-5">{found.title}</h4>
<p>{found.content}</p>
<p>{found.price} 원</p>
<button className="btn btn-danger" onClick = {() => {
let a = `{id : ${found.id}, name : '${found.title}', count : 1}`
console.log(cart)
return (
dispatch(pushCart(a))
 )
 }}>주문하기</button>
</div>
</div>
</div>

<Nav variant="tabs" defaultActiveKey="link0">
<Nav.Item>
<Nav.Link eventKey="link0" onClick = {() => {
setDetailTab(0);
 }}>버튼0</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link1" onClick = {() => {
setDetailTab(1);
 }}>버튼1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link2" onClick = {() => {
setDetailTab(2);
 }}>버튼2</Nav.Link>
</Nav.Item>
</Nav>

<TabContent detailTab = {detailTab} found = {found}/>
</div>
 )
}

function TabContent({detailTab, found}){

let [fade, setFade] = useState('');
let {left} = useContext(Context1);

useEffect(() => {

let a = setTimeout(() => {
setFade('end');
 }, 10)

return () => {
clearTimeout(a);
setFade('');
 }
 }, [detailTab])

return ( <div className = {'start ' + fade}> {
 [<div>{found.title}</div>, <div>{left[found.id]+ '개 남음'}</div>, <div>내용 2</div>][detailTab]
} </div>
 )
}

[codingapple]

페이지 이동시 새로고침되면 state가 리셋됩니다 
navigate() 이용해서 페이지를 이동해봅시다

[글쓴이]

글