Access store value

useSelector

react-redux의 useSelector 훅을 사용하여 Redux의 store의 값을 가져올 수 있다.

import { useSelector } from 'react-redux';

console.log(useSelector((store) => {console.log(store)}))

Setup Cart

CartContainer.js

import React from 'react'
import CartItem from './CartItem'
import { useSelector } from 'react-redux'

const CartContainer = () => {
    const {cartItems, total, amount} = useSelector((store) => (store.cart));

    if(amount < 1){
        return <section className='cart'>
            <header>
                <h2>장바구니</h2>
                <h4 className='empty-cart'>담겨진 상품이 없습니다.</h4>
            </header>
        </section>
    }


    return (
        <section className='cart'>
            <header>
                <h2>장바구니</h2>
            </header>
            <div>
                {cartItems.map((item) => {
                    return <CartItem key={item.id} {...item}/>
                })}
            </div>
            <footer>
                <hr/>
                <div className='cart-total'>
                    <h4>
                        총액<span>${total}</span>
                    </h4>
                </div>
                <button className='btn clear-btn'>비우기</button>
            </footer>
        </section>
    )
}

export default CartContainer

CartContainer 컴포넌트에서 useSelector를 사용하여 store에 접근하여 cart상태 값을 가져온다.