[Redux] Redux 사용법 (완) - 컴포넌트에서 store 호출하기

Redux의 매커니즘

• slice에서 상태를 관리 
• store에서 slice를 관리 
• Provider로 컴포넌트 감싸기 
• 컴포넌트에서 store 호출해서 사용하기 (이번편에서는 이 내용을 다룹니다.)

✅ 상태(state) 사용하기

useSelector() 를 사용하여 slice의 상태값을 가져올 수 있습니다.

useSelector((state) => state.slice이름.상태이름)

import { useSelector } from "react-redux";

const UserList = () => {
  // userSlice의 userList 상태값을 가져오기
  const userList = useSelector((state) => state.user.userList);
  

  return (생략...)
};


// 이해를 돕기 위해 앞서 정의한 userSlice의 내용을 일부 가져왔습니다.
name: "user", 
  initialState: { 
    userList: [
      { name: "A", age: 30 },
      { name: "B", age: 20 },
      { name: "C", age: 10 },
    ],
  },

userSlice의 내용을 보면 name : "user" 과 userList 를 볼 수 있습니다.

따라서 userList를 가져오려면 useSelctor((state) => state.user.userList) 로 가져올 수 있습니다.

 

✅ 상태관리 함수(reducer) 사용하기

useDispatch()를 사용하여 리듀서 함수를 사용할 수 있습니다.

useDispatch()는 보통 dispatch라는 변수에 저장하여 사용합니다.

const dispatch = useDispatch();
dispatch( 리듀서함수({ 파라미터 }) );

import { useState } from "react";
import { useDispatch } from "react-redux";
import { addUser, resetInput} from "./userSlice";
import UserList from "./UserList";

export const User = () => {
  const dispatch = useDispatch();
  let name = "홍길동";
  let age = "10";
  
  return (
      <button onClick={() => dispatch(addUser({ name, age }))}>추가</button>
      <button onClick={() => dispatch(resetInput())}>리셋</button>
    </>
  );
};

⭐ 정리

1. useSelector() : 상태값을 가져오는 함수

    사용법 :  useSelector((state) => state.slice이름.상태이름)

2. useDispatch() : 리듀서 함수를 사용하는 함수

    사용법 : dispatch( 리듀서함수({ 파라미터 }) )