Redux - (5) useSelector, useDispatch

useSelector();

state꺼내쓰는 더 쉬운 방법 : useSelector();

1. export default A; 다시 바꾸준다.
2. import { useSelector } from 'react-redux';
3. let state = useSelector((state) => state)

console.log(state)의 결과

useDispatch();

dispatch하는 더 쉬운 방법 : useDispatch();

1. import { useDispatch } from 'react-redux';
2. let dispatch = useDispatch()
3. props.dispatch를 dispatch로 교체

적용한 코드

useSelector, useDispatch 미쳤다...

//A.js
import React from 'react';
import { Table } from 'react-bootstrap';
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';
import { connect } from 'react-redux';

function A(props){

  let state = useSelector((state) => state)
  console.log(state);
  let dispatch = useDispatch()

  return (
    <div>
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>id</th>
            <th>Name</th>
            <th>Quan</th>
            <th>Set</th>
          </tr>
        </thead>
        <tbody>
            {
              state.reducer.map((el, i)=>{
                return(
                  <tr key={ i }>
                    <td>{ i }</td>
                    <td>{ el.id }</td>
                    <td>{ el.name }</td>
                    <td>{ el.quan }</td>
                    <td>
                      <button onClick={ ()=>{ dispatch({ type: 'plus', payload: {name: 'kim'} }) } }>+</button>
                      <button onClick={ ()=>{ dispatch({ type: 'minus' }) } }>-</button>
                    </td>
                  </tr>
                )
              })
            }
        </tbody>
      </Table>
    
      {
        props.alert
        ? (
          <div class="alert alert-success" role="alert">
            A simple success alert—check it out!
            <button onClick={()=>{ dispatch({ type: 'close' }) }}>닫기</button>
          </div> 
        )
        : null
      }

      <button onClick={()=>{ dispatch({ type: 'add', payload: { id: 5, name: 'jeonju', quan: 23 } }) }}>
        항목추가
      </button>
    </div>
  )
}


// function 함수명(state){
//   console.log(state);
//   return {
//     state: state.reducer,
//     alert: state.reducer2
//   }
// }


// export default connect(함수명)(A);
export default A;