redux store에 있던 state를 꺼내쓰려면
함수를 작성해서 파일 밑에 첨부하면 됐다
하지만 코드가 길기 때문에 함수 대신
useSelector Hook을 쓰면 조금 더 쉽게 state를 가져 올 수 있다

cart.js

import ....;
import {connect} from 'react-redux';
function Cart(props){
  return (
    <div>
      {props.state[0].name}
    </div>
  )
}

function state를props화(state){
  return {
    state : state
  }
}

export default connect(state를props화)(Cart);

위와 똑같은 기능을 하는 useSelector Hook으로 바꿔보자!

cart.js

import { useSelector } from 'react-redux';

function Cart(props) {
  let state = useSelector((state) => state )
  console.log(state.reducer)
  
  return(
  	{state.reducer[0].name}
  )
} 
export default Cart; 

useSelector Hook 사용법
1. useSelector를 import 해오고
2. useSelector() 안에 콜백함수 하나만 적어주면 된다
3. 그럼 그 자리에 redux state가 남는데 그걸 변수에 저장해서 쓰면 된다

콜백함수 안에는 파라미터 하나만 입력가능하고
그건 자동으로 store (reducer 합친 것)가 된다
(state) => state.reducer 이런 식으로 쓰면 조금 상세하게 state를 원하는 것만 가져올 수도 있다

useDispatch 사용법

dispatch() 하고싶으면 useDispatch로 가져와서 사용하면 된다

index.js

let initialState = [{id : 0, name : '노른자 분리기', quan : 2}];

function reducer(state = initialState, action){
  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
  }
  
}
let store = createStore(reducer);

Cart.js

import { useSelector, useDispatch } from 'react-redux';

function Cart(props){
  let state = useSelector((state) => state)
  let dispatch = useDispatch()

  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        { state.reducer.map((a,i)=>{
          return (
          <tr key={i}>
            <td>{a.id}</td>
            <td>{a.name}</td>
            <td>{a.quan}</td>
            <td><button onClick={()=>{ dispatch({type: '수량증가'}) }}> + </button></td>

            <td><button onClick={()=>{ dispatch({type: '수량감소'}) }}> - </button>
</td>
          </tr>
          )
        })  }
      </Table>
    </div>
  )
}

props.dispatch()로 state 수정요청 보내줬던걸
간단하게 dispatch() 만 사용할 수 있다