[Redux Toolkit] TypeScript로 store, slice, selector 타입 지정하기

 

TypeScript로 store, slice, selector 타입 지정하기

 

---

 

1. store.tsx

 

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: {
   // reducer 입력
  },
});

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

 

가장 하단에 export type RootState = ReturnType<typeof store.getState>; 를 추가한다.

 

2. slice.tsx

 

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

interface StateType {
  a: number;
  b: boolean;
}

const initialState: StateType = {
  a: 0,
  b: false,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    aUpdate: (state: StateType) => {
      state.a = state.a + 1;
    },
    bUpdate: (state: StateType, action: PayloadAction<boolean>) => {
      state.b = action.payload;
    },
  },
});

export default counterSlice;
export const {
  aUpdate,
  bUpdate,
} = counterSlice.actions;

 

 interface(혹은 type)으로 타입을 지정해주고 initialState 뒤에 타입을 입력해준다. 그리고 slice의 reducer에도 state의 타입을 지정해주면 된다. action.payload의 타입은 PayloadAction을 import 해준 뒤, action 뒤에 PayloadAction<타입>으로 입력해주면 됨!

 

객체 타입은 다음과 같이 지정해주면 된다.

 

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

interface StateType {
  data: {
    name: string;
    img: string;
  };
}

const initialState: StateType = {
  data: { name: "", img: "" },
};

const dataSlice = createSlice({
  name: "example",
  initialState,
  reducers: {
    dataUpdate: (
      state: StateType,
      action: PayloadAction<{
        name: string;
        img: string;
      }>
    ) => {
      state.data = action.payload;
    },
  },
});

export default dataSlice;
export const {
  dataUpdate,
} = dataSlice.actions;

 

객체 타입은 초기값을 아예 구체적으로 적어주어야 하고, PayloadAction에도 <{ 이름: 타입, 이름: 타입 }> 이렇게 타입을 각각 지정해주어야 한다.

 

 

3. useSelector

 

import { RootState } from "./store";

const data = useSelector((state: RootState) => {
    return state.data;
});

 

위에서 지정했던 RootState를 import해서 가져오고, useSelector의 state 부분에 타입으로 넣어준다.

 

---

 

payload 타입 지정을 어떻게 할지 감이 안 와서 어려웠는데 다행히 해결👏