2월 26일 TIL

Redux Toolkit 적용해보기

• 시작 하기 전에 기본적인 데이터가 있다는 가정하게 진행했음

{
	"data": {
	  "memberId": 1 // number
	  "accessToken": "Bearer asdklfjaslkdfjaslkdfjsfd" //string
	  "refrashToken": "Berer aldkfjaskldfjklawdfjlkewjf" //string
    }
}

Store정의 하기

• TS를 사용하고 있기 때문에 타입먼저 지정해줌
  • interface명은 인증에 대한 정보이기 때문에 AuthState로 지정했음
  • accessToken과 refrashToken은 추출 후 API연동 외에는 사용하지 않기 때문에 전역적으로 관리될 필요는 없다는 판단을함
  • 그 둘은 추출해서 Instance화 시켜서 작성 예정

interface AuthState {
  memberId: number;
}

• Store의 초기상태를 설정함
• createSlice는 Slice를 정의하는데 사용하고 상태 업데이트를 하는데 사용할 함수를 정의했음
  • 추후 로직은 변경 될 수 있음

const initialState: AuthState = {
  memberId: 0,
};

• Slice를 작성함

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

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setMemberId(state, action: PayloadAction<number>) {
      state.memberId = action.payload;
    },
  },
});

export const { setMemberId } = authSlice.actions;
export default authSlice.reducer;

• Store생성
• configureStore로 생성하고 Slice를 store에 전달함

import { configureStore } from '@reduxjs/toolkit';
import authReducer from './authSlice';

const store = configureStore({
  reducer: {
    auth: authReducer,
  },
});

export default store;