redux toolkit의 store 생성

'use client';
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

// 타입스크립트 추론용 제작
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

configureStore

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

configureStore: Redux Toolkit에서 스토어를 쉽게 만들도록 도와주는 함수

counterReducer: counter 기능(카운터 상태 업데이트 로직)을 담당하는 리듀서

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

스토어 안에 counter라는 상태 조각이 생기고, 이 상태는 counterReducer가 관리한다.

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

store.getState()는 현재 스토어의 전체 상태를 반환하는 함수.

typeof store.getState 함수로 타입을 가져온다. ReturnType<...> 그 다음 그 함수가 반환하는 값의 타입만 추출한다.

Typescript를 사용하지 않으면 위 코드는 사용하지 않는다. 위 코드를 사용하지 않으면 어떻게 될까?

현재 store에서 사용하는 dispatch 함수의 정확한 타입을 알기 위해 state를 일일히 확인해야 해서 대규모 유지보수에 불편함을 가지게 된다.

type RootState = {
  counter: {
    value: number;
  }
}

export type AppDispatch = typeof store.dispatch는 이러한 코드와 같다고 보면 된다.