TypeScript의 주요 이점 중 하나는 코드의 변수가 올바른 것을 수신하는지 확인하는 정적 유형 검사입니다.

애플리케이션에 상태 유형을 가져와야 하는 경우가 많이 있습니다. 특히 Redux를 사용하고 다른 상태 리듀서를 하나의 루트 리듀서로 결합하는 경우에 그렇습니다.

다음은 TypeScript React 애플리케이션에서 항상 최신 유형의 상태를 유지하도록 하는 빠른 가이드입니다!

Redux에서 루트 상태가 있는 위치

redux를 사용하는 사람들의 경우 애플리케이션의 상태가 반드시 구성 요소 내부에 있는 것은 아니며 일반적으로 그렇습니다. 오히려 구성 요소는 전역 응용 프로그램 상태의 '저장소'에 연결되어 해당 정보를 얻습니다.

대부분의 경우 특정 상태 변경 작업을 줄이는 '리듀서'가 많이 있으며 이러한 리듀서는 모든 상태를 결합하는 '루트 리듀서'로 결합됩니다. 다음과 같이 보일 것입니다.
rootReducer.ts

import { combineReducers } from 'redux';

import userReducer from './..';
import shopReducer from './..';

const rootReducer = combineReducers({
    user: userReducer,
    shop: shopReducer
});

루트 리듀서에서 상태 가져오기

기억한다면 rootReducer는 redux 애플리케이션의 상태를 설명합니다. 유형을 가져오려면 다음 내보내기를 작성하기만 하면 됩니다.

export type RootState = ReturnType<typeof rootReducer>;

export type : 다른 곳에서 state 타입을 사용할 수 있도록

RootState : 유형의 이름

ReturnType<> : <> 내부의 리턴 유형을 리턴합니다

.

typeof rootReducer : TypeScript가 디코딩하도록 할 리듀서의 복잡한 redux 유형입니다.

이것의 이점은 유형이 고정되어 있지 않다는 것입니다. 루트 리듀서에서 리듀서를 추가하거나 제거할 수 있으며 그에 따라 루트 상태가 업데이트됩니다!

읽어 주셔서 감사합니다 :)