TypeScript-ify Redux Store

typescriptify-redux.md

Description

Defines the app's Redux store using TypeScript to add type safety and improve developer documentation.

The general strategy to get TypeScript to work nicely with ImmutableJS is to:

1. Define ReducerNameStateData type (the raw, JSON-serializable state)

export type MyReducerStateData = {
  currentUser: string;
  data: {
    loaded: boolean;
  };
};

2. Define ReducerNameState type, which extends Immutable.Map and overrides some methods

export interface MyReducerState extends ImmutableMap<string, any> {
  toJS(): MyReducerStateData;
  get<K extends keyof MyReducerStateData>(key: K, notSetValue?: MyReducerStateData[K]): MyReducerStateData[K];
  set<K extends keyof MyReducerStateData>(key: K, val: MyReducerStateData[K]): MyReducerStateData;
}

3. Use the ReducerNameState in the actual reducer function and createStore() call