[Redux Toolkit] useSelector & useDispatch 커스텀 훅으로 타입 지정하기

 const users = useSelector((state) => {
    return state.users.users;
  });

위 처럼 타입 설정없이 사용하면 state의 타입에 대한 에러가 발생한다.

해결 방법

1. RootState, AppDispatch 타입 설정

// store.ts

import { configureStore } from '@reduxjs/toolkit';
import usersReducer from './usersSlice';
import authReducer from './authSlice';

export const store = configureStore({
  reducer: { users: usersReducer, auth: authReducer },
});

export type RootState = ReturnType<typeof store.getState>; // 얘랑
export type AppDispatch = typeof store.dispatch; // 얘 두 줄 추가

2. 간편한 사용을 위해 커스텀 훅 생성

// hooks/useRedux.ts

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

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

3. 사용하기

커스텀 훅을 만들기 전에는 사용할 때 마다 RootState로 타입 지정을 해주어야 한다.

import { useSelector } from 'react-redux';
import { RootState } from '../store/store';

  const users = useSelector((state: RootState) => {
    return state.users.users;
  });

커스텀 훅을 사용하면 typescript없이 사용하던대로 사용하면 된다.

import { useAppSelector } from '../hooks/useRedux';

 const users = useAppSelector((state) => {
    return state.users.users;
  });