2023-12-14 본캠프 51일차 / 70일차 TIL

2023-12-14 본캠프 51일차 / 70일차 TIL

주요 진행사항

- 개인과제 진행

 

개인과제 진행 - TypeScript 리덕스 툴킷 세팅

1. config 파일

import { configureStore } from '@reduxjs/toolkit';
import AlertSlice from './modules/AlertSlice';
import LoadingSlice from './modules/LoadingSlice';

const store = configureStore({
  reducer: { AlertSlice, LoadingSlice }
});

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

 

기존 config 파일과 비슷하지만 rootstate와 appdispatch라는 type 을 export하게된다.

말그대로 RootState는 store의 타입이고 AppDispatch는 dispatch의 타입이다.

 

이 타입들은 각각 useSeletor와 useDispatch에서 사용된다.

const dispatch = useDispatch<AppDispatch>();
const targetState = useSeletor((state:RootState)=>state.targetSlice);

 

사용하려는 파일 내부에서 다음과 같이 import해서 사용하면 된다.

 

 

2. slice 파일

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const initialState = {
  isLoading: false
};

const LoadingSlice = createSlice({
  name: 'LoadingSlice',
  initialState,
  reducers: {
    setLoading: (state, action: PayloadAction<boolean>) => {
      state.isLoading = action.payload;
    }
  }
});

export default LoadingSlice.reducer;
export const { setLoading } = LoadingSlice.actions;

 

slice 파일에서는 특별한 부분은 없지만 payload의 타입을 지정해야한다.

이때 redux toolkit에서 제공하는 PayloadAction을 사용한다.

 

사용법은 reducers 내의 reducer의 매개변수 중 action 부분 뒤에 :PayloadAction<type>을 사용해주면 된다.