Typescript로 Redux 앱을 입력하기 위한 두 가지 간단한 트릭

몇 년 동안 Typescript와 Redux를 별도로 사용했음에도 불구하고 항상 함께 사용하는 좋은 경험은 없었습니다. 최근에 저는 저에게 엄청난 도움이 된 두 가지 트릭을 우연히 발견했습니다.

초기 상태에서 감속기 유형 생성

새 감속기를 생성할 때 typeof를 사용하여 초기 상태에서 감속기에 대한 유형을 생성할 수 있습니다. 이것은 또한 각 리듀서의 목적을 빠르게 이해하는 데 도움이 되는 초기 상태를 완전히 채우도록 권장합니다.

감속기를 내보낼 때 생성된 유형을 반환 유형으로 포함해야 합니다.

const initialState = {
   dogs: 4,
   name: "Callie",
   colors: ["red", "green", "blue"]
};
type MyReducer = typeof initialState;

export default function myReducer(state = initialState, action): MyReducer {
  // ...
}

초기 상태에 모든 값이 포함되지 않은 경우 null 와 같은 자리 표시자 값으로 포함할 수 있습니다. 이러한 경우 as <type>를 사용하여 해당 상태에 대해 의도된 유형을 나타낼 수 있습니다.

예를 들어 const initialState = { person: null as Person };

전체 Redux 상태 내보내기

감속기가 모두 개별적으로 입력되면 Typescript의ReturnType 유틸리티를 사용하여 결합된ReduxState 유형을 만들고 내보낼 수 있습니다. 이 유형에는 애플리케이션에서 사용되는 모든 단일 감속기에 대한 정보가 포함됩니다.

import { reducers } from "./reducers";
export const store = createStore(combineReducers(reducers));

export type ReduxState = ReturnType<typeof store.getState>;

이것을 사용하여 선택기 함수에서 사용하는 state 인수, mapStateToProps 또는 필요할 수 있는 다른 곳에서 입력하십시오.

import { ReduxState } from "../store";

export const getDogs(state: ReduxState) {
   return state.myReducer.dogs;
}

이러한 동일한 아이디어의 버전(및 기타 여러 버전)은 redux 문서의 Usage with Types 섹션에서 찾을 수 있습니다.

타이프스크립트를 다루지는 않지만(아직!), 상용구를 삭제할 때 redux가 얼마나 더 간단해졌는지 보여주는 제 강의Redux with React Hooks를 확인하는 것을 잊지 마십시오.

Redux를 사용할 때 가장 좋아하는 typescript 트릭은 무엇입니까?