React overload on Typescript - CombineReducer

Viewed 79

I am currently using a redux pattern in a create-react-app with typescript.

Currently i am having an issue deciphering the overload error messages.

The current fix works but i dont think its correct as it wont be strictly typed anymore.

const combinedReducers = combineReducers({ reducer1, reducer2 } as any);

Overload Error message:

No overload matches this call.
  Overload 1 of 3, '(reducers: ReducersMapObject<ApplicationState, any>): Reducer<CombinedState<ApplicationState>, AnyAction>', gave the following error.
    Type '(state: ModelState | undefined, action: any) => { model: any; loading: boolean; errorMessage: string; } | { loading: boolean; errorMessage: any; model: never[]; }' is not assignable to type 'Reducer<ModelState, any>'.
      Type '{ model: any; loading: boolean; errorMessage: string; } | { loading: boolean; errorMessage: any; model: never[]; }' is not assignable to type 'ModelState'.
        Type '{ loading: boolean; errorMessage: any; model: never[]; }' is not assignable to type 'ModelState'.
          Types of property 'model' are incompatible.
            Type 'never[]' is missing the following properties from type 'Model': opportunity_id, model_result  TS2769

    24 |     save_opportunity_state: SaveOpportunityReducer,
    25 |     archive_state: ArchiveOpportunityReducer,
  > 26 |     model_state: GetModelReducer,
       |     ^
    27 | });
    28 | 

Reducer:

export interface ModelState {
    model: Model;
    loading: boolean;
    errorMessage: string;
}
export interface Model {
    opportunity_id: string;
    model_result: ModelResult;
}
export interface ModelResult {
    model_info: ModelInfo;
    qualification: Qualification;
    similar_deals?: null[] | null;
    tool_tips: ToolTips;
    top_actions?: null[] | null;
    win_probability: WinProbability;
}
export interface ModelInfo {
    probability_version: string;
    similar_deals_version: string;
}
export interface Qualification {
    colour: string;
    score: number;
}
export interface ToolTips {
    [key: string]: string;
}
export interface WinProbability {
    colour: string;
    features?: null[] | null;
    score: number;
}

const initialState: ModelState = {
    model: {
        opportunity_id: '',
        model_result: {
            model_info: { probability_version: '', similar_deals_version: '' },
            qualification: { colour: 'grey', score: 0 },
            similar_deals: [],
            tool_tips: {},
            top_actions: [],
            win_probability: { colour: 'green', features: [], score: 0 },
        },
    },
    loading: false,
    errorMessage: '',
};
1 Answers

If you look at the error message, specifically the last one states that model is missing following property.

I am guessing your failure case just returns an empty object. This contradicts the types defined above as the model should always contain x, y and z.

So in your failure case, you should add the following:

model: { ...initialState.model },
Related