[23.11.13] 오늘의 TIL(useSelector, useDispatch)

useSelector

useSelector : 스토어의 상태값을 반환해주는 Hook
▶️ 스토어의 상태값이 바뀐경우 바뀐 스토어의 상태값을 다시가저와 컴포넌트를 렌더링시킨다.

예시코드

// 1. store에서 꺼낸 값을 할당 할 변수를 선언합니다.
const number = 

// 2. useSelector()를 변수에 할당해줍니다.
const number = useSelector() 

// 3. useSelector의 인자에 화살표 함수를 넣어줍니다.
const number = useSelector( ()=>{} )

// 4. 화살표 함수의 인자에서 값을 꺼내 return 합니다. 
const number = useSelector((state) => {
	return state
});

🔼 스토어에 저장된 변수를 useSelector 통해서 가져오기

// src/App.js

import React from "react";
import { useSelector } from "react-redux"; 

const App = () => {
  const counterStore = useSelector((state) => state); 

  return <div>
  </div>;
}

export default App;

🔼 App.js에 추가하여 useSelector로 가져온 데이터 출력하기

useDispatch

useDispatch : 생성한 action객체를 리듀서로 보내주는 Hook
▶️ 생성한 action객체 : type과 key를 가져야 하는 객체
▶️ 리듀서 : 디스패치를 통해 전달받은 객체를 검사하고 조건이 일치했을때
새로운 상태값을 (변화를) 만들어내는 함수

예시코드

const counter = (state = initialState, action) => {
    switch (action.type) {
        case "PLUS_ONE":
            return {number: state.number + 1};
        case "MINUS_ONE":
            return {number: state.number - 1};
        default: 
            return state;
    }
}

이렇게 type을 꼭 작성해야한다.