TIL 54. 2024-03-19

팀 프로젝트 초기 셋팅

• store/config/modules 폴더를 생성하여 redux-toolkit 셋팅
• usedipatch, useSelector 부분도 별도로 분리하여 사용

configStore.ts

import { configureStore } from '@reduxjs/toolkit';
import user from '@/store/modules/user';

//store 생성
const store = configureStore({
  reducer: {
    user
  }
});

export type RootState = ReturnType<typeof store.getState>;

export type AppDispatch = typeof store.dispatch;

export default store;

modules

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

//인터페이스 정의
interface UserState {
  value: object | null;
}

//초기 상태 값

const initialState: UserState = {
  value: null
};

//slice 설정
export const UserSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    userAction: (state, action: PayloadAction<UserState>) => {
      state.value = action.payload;
    }
  }
});

export const { userAction } = UserSlice.actions;
export const userState = (state: RootState) => state.user.value;
export default UserSlice.reducer;

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '@/store/config/configStore';

type DispatchFunc = () => AppDispatch;

export const useAppDispatch: DispatchFunc = useDispatch;

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;