vite) typeScript의 RTK 구조

1. 앱의 최상위 컴포넌트에 Provider를 사용하여 Redux 스토어를 제공

//Main.tsx


import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App.tsx";
import store from "./store/config/configStore.ts";


ReactDOM.createRoot(document.getElementById("root")!).render(
  <>
      <Provider store={store}>
        <App />
      </Provider>
  </>
);

2. configStore 생성

//configStore.ts


import { configureStore } from "@reduxjs/toolkit";
import modalToggle from "src/store/modules/modalForm";

//1. configureStore 함수를 사용하여 store를 생성
//2. configureStore 함수의 인자로는 reducer 속성이 포함된 객체(module)가 전달
const store = configureStore({
  reducer: {
    modalToggle,
  },
});


//스토어의 전체 상태 타입을 RootState 타입으로 정의
//ReturnType<typeof store.getState>: 스토어의 getState 메서드의 반환값을 나타낸다.
export type RootState = ReturnType<typeof store.getState>;

// 스토어의 디스패치 함수 타입을 AppDispatch 타입으로 정의
// typeof store.dispatch: 스토어의 dispatch 메서드의 타입을 나타낸다.
export type AppDispatch = typeof store.dispatch;

//최상위 컴포넌트에 제공할 store
export default store;

3. useDispatch, useSelector를 customHook으로 만들기

: 후크를 사용하여 재사용성⬆️, 종속성 문제를 피할 수 있다.

//useRedux.ts


import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../store/config/configStore";
//TypedUseSelectorHook:  Redux useSelector훅의 타입을 정의하는데 사용
//AppDispatch: Redux 애플리케이션에서 사용할 디스패치 함수의 타입을 정의하는데 사용
//RootState: Redux 스토어에서 사용할 전체 애플리케이션 상태의 타입을 정의하는데 사용

//DispatchFunc는 Redux 스토어의 디스패치 함수 타입을 정의하는 함수 타입
type DispatchFunc = () => AppDispatch;

//해석: useAppDispatch에 스토어의 디스패치 함수 타입을 정의한 후  "useDispatch 기능을 가져와 사용"
//"useDispatch 기능을 가져와 사용" ==> dispatch를 통해 action을 store에 전달하는 기능을 말한다.
export const useAppDispatch: DispatchFunc = useDispatch;

//해석: useAppSelector에 스토어의 전역상태 타입을 정의한 후 "useSelector 기능을 가져와 사용"
// "useSelector 기능을 가져와 사용" ==> store의 특정 state값을 가져오는 기능을 말한다.
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

4. moduleSlice.ts 생성

//todoSlice.ts


import { PayloadAction, createSlice } from "@reduxjs/toolkit";
import { RootState } from "../config/configStore";

//초기 상태 타입
interface ModalState {
  value: boolean;
}

//초기값 상태 값
const initialState: ModalState = {
  value: false,
};

//slice 설정
export const toggleSlice = createSlice({
  name: "modalTodo",
  initialState,
  reducers: {
    // "PayloadAction"를 이용해서 "payload"타입 지정
    modalToggleAction: (state, action: PayloadAction<boolean>) => {
      state.value = action.payload;
    },
  },
});

//actions
export const { modalToggleAction } = toggleSlice.actions;

// slice의 상태값
export const modalState = (state: RootState) => state.modalToggle.value;

//slice의 reducers
export default toggleSlice.reducer;

5. 기능 컴포넌트에서의 사용

import { useAppDispatch, useAppSelector } from "src/utils/hooks/useRedux";
import { modalState, modalToggleAction } from "src/store/modules/modalForm";

  const dispatch = useAppDispatch();

  // 기존 사용 방식: useAppSelector((state) => state.modalToggle.value
  const modalSelector⬅️ = useAppSelector(modalState);

    
    //store에 전달
    dispatch(modalToggleAction(false));

  };

👇👇👇👇👇👇👇👇👇

리덕스 참고 사이트