[Redux, React] React-Redux - useSelector, useDispatch로 state에 접근하기!

Redux store state 접근

React-Redux의 Hooks인 useSelector와 useDispatch를 이용하여 리덕스 스토어 state에 접근할 수 있습니다.

1. useSelector

useSelector를 사용하여 스토어에 저장 되어 있는 데이터, state를 읽을 수 있도록 도와줍니다.
한마디로 useSelector의 결과물은 store.getState()했을 때의 결과물과 동일합니다.

import { useSelector } from 'react-redux';
const toDoList = useSelector((state) => state.toDoList)

2. useDispatch

useDispatch는 리덕스 스토어의 dispatch 를 함수에서 사용 할 수 있게 해주는 Hook 입니다.
한마디로 액션을 리덕스 스토어에 발송, 전달을 도와주는 Hook입니다.

const ADD = "ADD"

// 액션 생성 함수
export const dispatchAdd = (text) => {
  return  {
    type: ADD,
    text
  }
};

import { useDispatch } from 'react-redux';
import { dispatchAdd } from '../store';

const dispatch = useDispatch()
dispatch(dispatchAdd(text));

참고

React Redux 빠른 시작
5. 카운터 구현하기