장바구니(2)

Redux store에 있던 state 가져다쓰는 법

(Cart.js)

import { useSelector } from "react-redux"

function Cart(){
  let a = useSelector((state) => { return state } )
  console.log(a)

  return (생략)
}

변수로저장돼서 모든state가 그자리에 남아있음.

숙제용 장바구니

[
  {id : 0, name : 'White and Black', count : 2},
  {id : 2, name : 'Grey Yordan', count : 1}
] 

//cartdate에 추가해줌.
let Cartdate = createSlice({
  name: "storedate",
  initialState: [
    { id: 0, name: "White and Black", count: 2 },
    { id: 2, name: "Grey Yordan", count: 1 },
    { id: 5, name: "sumin kim", count: 3 },
  ],
});


export default configureStore({
  reducer: {
    user: user.reducer,
    stock: stock.reducer,
    Cartdate: Cartdate.reducer,  //Cartdate를 보내줌.
  },

Cart.js

function CartDateUpdate() {
  
  //cartDate를 사용하기위해 변수로선언하고 선언해줌.
  
  let cartDate = useSelector(redux => {
    return redux.Cartdate;
    //redux라고 해줄수도있지만 redux.user, stock,cartdate가 있는데 계속  cartdate.cartdate.id 이런식으로 사용하는것보다는 미리선언해줘서 cartdate.id라고 입력해서 더욱 편리하게 //사용하기위함.
  //  안에 .Cartdate를 해줘서 더욱간편하게 사용하기위함.
  });
  map함수 사용이유는 장바구니가 추가될떄마다
  자동으로 추가되게끔 만들기위해
  사용함.
  return cartDate.map((el, idx) => {
    return (
      <tr>
        <td>{cartDate[idx].id}</td>
        <td>{cartDate[idx].name}</td>
        <td>{cartDate[idx].count}</td>
        <td>수량</td>
      </tr>
    );
  });
}