react useSelector와 useDispatch 사용시 에러

useSelector & useDispatch

react-redux 에서 제공하는 useSelector 와 useDispatch를 사용하면 state를 제대로 읽지 못하는 이슈가 생겼다.

1. combineReducer 파일을 수정

    import { combineReducers } from "redux";
    import user from './user';
    import mainData, {initialState} from './mainData';
    import { configureStore } from "@reduxjs/toolkit";
   
    // 타입 오류를 위해서 state의 타입을 가져온다.
    export interface rootState {
      mainData: initialState;
    }
   
    const rootReducer = combineReducers({
      user,
      mainData
    })
   
    // 리덕스에서 관리하는 상태에 대한 타입
    export type RootState = ReturnType<typeof rootReducer>;
   
    const store = configureStore({
      reducer: rootReducer,
    })
   
    // usedispatch 사용시 에러 발생을 잡아주기 위한 타입 설정
    export default store;
    export type AppDispatch = typeof store.dispatch;
   

   ⇒ combinReducer로 reducers를 한데 모아서 index.js 에서 const store = createStore(reducers) 로 store를 생성했지만 이렇게 되면 state의 타입이 정해지지 않아서 컴포넌트에서 읽어지지 않았다.
   그래서 store.js 파일에서 store를 생성해서 내보내주고 dispatch의 타입도 지정해주었다.

2. reduxhook 생성

    import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
    // store에서 state와 dispatch의 타입을 가져온다
    import type { RootState, AppDispatch } from '../redux/modules/store'
   
    // Use throughout your app instead of plain `useDispatch` and `useSelector`
    // useSelector와 useDispatch의 타입 설정
    export const useAppDispatch: () => AppDispatch = useDispatch
    export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
   

   redux에서 제공하고 있는 dispatch와 selector를 커스텀해서 사용하니 state와 dispatch 모두 정상적으로 작동하였다.

3. components에서 사용

    import { useAppDispatch, useAppSelector } from '../hooks/reduxHook'
   
    const dispatch = useAppDispatch();
   
    // useSelector 와 달리 따로 type을 지정해주지 않아도 작동
    const { data } = useAppSelector(state => state.mainData);