[Redux] 리덕스 Hooks 생성

1️⃣ 기본 개념: useSelector와 useDispatch

 

useSelector()

• 리덕스 스토어에 있는 상태 데이터 가져올 때 쓰는 훅 
• 예:

const count = useSelector(state => state.counter.value);

• 여기서 문제는 TypeScript를 쓰면 state의 타입을 정확히 알려주지 않으면 타입 추론이 안 된다는 점

useDispatch()

• 액션(action)을 디스패치(dispatch)할 때 사용
• 예:

const dispatch = useDispatch();
dispatch(increment());

• TypeScript를 쓰면, 어떤 액션을 디스패치할 수 있는지 정확한 타입을 지정하면 더 안전하다.

 

2️⃣ 타입스크립트와 리덕스

TypeScript에서는 RootState와 AppDispatch라는 타입을 정의

// store.ts 예시
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

• RootState: 스토어 안의 전체 상태 타입
• AppDispatch: 디스패치 가능한 액션 타입

그런데 그냥 useSelector와 useDispatch를 쓰면, 타입 추론이 자동으로 되지 않아서 타입 오류가 날 수 있음.

 

3️⃣ 커스텀 훅으로 타입 지정

그래서 이렇게 커스텀 훅을 만들어 사용한다.

export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useTypeDispatch = () => useDispatch<AppDispatch>();

1. useTypedSelector
   • 이제 이걸 쓰면 state 타입을 직접 지정하지 않아도 된다.
   • 예:

     const count = useTypedSelector(state => state.counter.value);
     // state.counter.value 가 number 타입으로 바로 추론됨

2. useTypeDispatch
   • 이걸 쓰면 디스패치할 때 액션 타입이 자동으로 체크된다.
   • 예:

const dispatch = useTypeDispatch();
dispatch(increment()); // ✅ 타입 안전
dispatch({ type: "UNKNOWN" }); // ❌ 타입 오류

 

• hooks/redux.ts

import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../store";

export const useTypedSelector: TypedUseSelectorHook<RootState>  = useSelector
export const useTypeDispatch = () => useDispatch<AppDispatch>();

 

 

---

※ 제너릭 타입 사용법

interface Obj<T>{
    name: T;
}

interface State {
    state: {
        data: string,
        loading: boolean
    }
}

const obj: Obj<State> = {
    name : {
        state: {
            data: 'abcd',
            loading: false
        }
    }
}