들어가기전에..

• 이전 프리프로젝트때 자바스크립트로 리덕스툴킷을 써본 경험이 있었다.
• 이번 프로젝트때에도 로그인할때 유저의 정보중에 유저의 주소, 닉네임, 유저의 userindex, 약사 회원의 storeIdx, 각 회원의 userType(일반회원, 약사회원, 관리자)등을 서버로 부터 받아서 여러 컴포넌트에서 써야했기 때문에 리덕스 툴킷을 쓰기로 했다.
• 자바스크립트로 프로젝트 할 때처럼 리덕스 툴킷을 썼는데..에러만 발생했다..🥲 타입스크립트로 리덕스 툴킷 쓰는 방법을 구글링 해보니..약간 까다로웠다.😇😇

구현 과정

메인프로젝트에서 리덕스 툴킷을 사용한 이유

• 복잡한 Redux 저장소 구성을 어느 정도 해결해 줄 수 있다.
• 유저의 정보중에 유저의 주소, 닉네임, 유저의 userindex, 약사 회원의 storeIdx, 각 회원의 userType(일반회원, 약사회원, 관리자)등을 서버로 부터 받아서 여러 컴포넌트에서 사용하기 편리하기 때문이다.
• 자체적으로 immer를 내부적으로 도입해서 사용하고 있어 코드의 양이 줄어든다.
• Redux와 달리 패키지 의존성을 줄여준다.

설치

npm install @reduxjs/toolkit

configureStore

State 타입 얻기

• 루트리듀서를 미리 정의하고 ReturnType 타입을 추출

• 자바스크립트쓰면서 프로젝트 했었을때 처럼 store을 쓰니까 콘솔에 에러가 찍혔다.
  
  => 해결방법 combineReducers를 써줘서 해결!

const rootReducer = combineReducers({
  userInfo: userSlice.reducer,
});

• State 라는 이름은 일반적으로 과도하게 사용되므로 혼동을 방지하기 위해 RootState와 같이 다른 이름을 지정하는 것이 좋다.
• store 폴더안에 store.ts를 만들어서 store만듬

Dispatch 타입 얻기

• hooks.ts 파일을 만들어 useDispatch, useSelector 의 타입을 지정, useAppSelector와 useAppDispatch export했다.

• 이 부분부터 동공지진이 왔다..
  이부분에서 에러가 자꾸 났고, 어디가 잘못된지 몰라서 구글링을 했다.
  => 타입스크립트로 리덕스 툴킷을 사용하려면 타입지정을 다 해줘야하고, useAppSelector와 useAppDispatch를 이용해야한다.

CreateSlice

• slice폴더안에 userSlice.ts 만듬
• 초기 상태 타입 정의
• createSlice를 사용해서 초기값, reducer 등을 정의
• 그 후 action으로 사용하기 위해서 userSlice.actions를 export하고,
  store에서 사용하기 위해 userSlice.reducer를 export한다.
• 그걸 store에서 사용해준다.

Provider

• store를 사용하기 위해 main.tsx에서 Provider를 사용하여 store에 우리가 만든 store를 넣어주면 된다.

useAppSelector와 useAppDispatch사용

• 로그인할때 서버에서 던져주는 데이터를 useAppDispatch를 사용해서 정보를 담고,
  필요한곳에서 useAppSelector로 데이터를 사용하였다.

구현 코드

//main.tsx
import { Provider } from "react-redux";
//import생략
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
    <Provider store={store}>
        <App />
    </Provider>
   </React.StrictMode>,
);


//store.ts
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { userSlice } from "../slice/userSlice";
//import생략
const rootReducer = combineReducers({
  userInfo: userSlice.reducer,
});

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

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

//userSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { User } from "../../Api/TYPES";

const initialState: User = {
  address: "",
  name: "",
  storeIdx: null,
  userIdx: null,
  userType: "",
  userRole: "",
};

export const userSlice = createSlice({
  name: "userInfo",
  initialState,
  reducers: {
    get: (state, action) => {
      state.response = action.payload;
    },

    DeleteUserInfo: (state) => {
      state.response = null;
    },
  },
});
export const { get, DeleteUserInfo } = userSlice.actions;
export default userSlice.reducer;