1. TS에서 Redux 사용하기

1.1 useSelector 사용

useSelector는 slice에서 state를 꺼내오는 훅이다. 사용하기위해서 state의 타입을 지정해주어야한다.

// App.tsx
import { useSelector } from 'react-redux'
import { RootState } from './src/store/reducer'

...
...

const isLoggedIn = useSelector((state: RootState) => !!state.user.email);
// 전 편에서 userslice의 보일러 플레이트를 작성하였습니다.

1.2 state의 타입 지정하기

state를 RootState라는 이름의 type으로 지정

// ./src/store/reducer.ts
import { combineReducers } from 'redux'

import userSlice from '../slice/user'

const rootReducer = combineReducers({
    user: userSlice.reducer,
})
// 여기서 state의 타입을 지정해준다.
export type RootState = ReturnType<typeof rootReducer>

export default rootReducer

2. useDispatch 사용

useDispatch는 state를 slice로 조작하는 훅이다.
useDispatch를 사용하기 위해서 useDispatch의 타입을 지정해주어야한다.

// ./src/store.index.ts
import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import { useDispatch } from 'react-redux'
import rootReducer from './reducer'

const store =  configureStore({
    reducer: rootReducer,
})

export default store
// 여기서부터 작성
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>()