[Hook] useSelector, useDispatch

 

useSelector

useSelector는 리덕스 스토어의 상태를 조회하는 Hook이다.

import { useSelector } from 'react-redux';

//RootState 중에 내가 가져오고 싶은 todo를 가져온다. 
const todoList = useSelector((state: RootState) => state.todo)

//또는 useSelector안에서 원하는 형식으로 바꿔서 리턴할 수도 있다.
const list = useSelector((state: RootState) => {
      const { todo } = state
      return Array.from(todo.todo.values())
})

---

useDispatch

Redux의 액션 생성함수를 실행하여 리덕스 스토어에 변경된 상태값을 저장하기 위해서 사용하는 react-redux 훅

 

1. react-redux 설치

2. useDispatch 선언

import { useDispatch } from 'react-redux';

cosnt dispatch = useDispatch(); // dispatch로 재선언하여 사용한다.

 

3. 리듀서 생성

// modules/fruit.js -  fruit이라는 기능을 가진 리듀서

// 액션
const SET_FRUIT_LIST = "fruit/SET_FRUIT_LIST";

// 액션 생성 함수
export const setFruitList = fruistList => ({ type : SET_FRUIT_LIST, fruitList });

// 초기값
const initialState = {
  name: false,
  price: false,
};

// 리덕스 스토어값 변경
export default function fruit(state = initialState, action) {
  switch(action.type) {
    case SET_FRUIT_LIST :
      return {
        ...state,
        name: action.fruitList,
      };
    default:
      return state;
  }
}

 

4. dispatch로 액션 호출

dispatch( setFruitList( "딸기" ) );

실행할 액션 함수명을 적은 후, 해당 액션함수의 파라미터에 변경할 상태값을 추가하고 dispatch로 감싸면 해당 액션을 호출하는 dispatch함수가 완성됨. 파라미터값에는 문자열 뿐 아니라, boolean, 정수, json타입 등 다양한 타입의 내용 넣을 수 있다.

// 액션 생성 함수
export const setFruitList = fruistList => ({ type : SET_FRUIT_LIST, fruitList });

액션 함수의 fruistList에는 위에서 추가한 ‘딸기’라는 값이 들어간다.

 

5. dispatch의 결과

// 리덕스 스토어값 변경
export default function fruit(state = initialState, action) {
  switch(action.type) {
    case SET_FRUIT_LIST :
      return {
        ...state,
        name: action.fruitList,
      };
    default:
      return state;
  }
}

마지막 부분에 스토어값을 변경시키는 함수 fruit부분을 살펴보자. action.fruitList에는 위에서 추가한 '딸기'라는 값이 들어있다. 이 딸기라는 값을 name이라는 리덕스 스토어의 상태에 저장한다. 즉, 리덕스 스토어 초기값을 살펴보면 name에는 false라는 초기값이 들어가 있다. 하지만 dispatch를 통해 setFruitList라는 액션에 '딸기'라는 값을 넣고 액션을 호출하게 되면, 딸기라는 값이 name에 들어가게 된다.

---

출처 : https://phsun102.tistory.com/84

React - useDispatch를 사용한 액션 실행