0

I have a set of reducers that I want to make sure that will always have certain 3 actions types (but allow for me to have more). Same for state. Have to have 3 pieces of state but allow for more

Sample code:

interface iFilterReducer {
  (state: iFilterState, action: FilterAction): iFilterState;
}

interface iFilterState {
    anchorEl: HTMLDivElement | null;
    isFilterApplied: boolean;
    appliedFiltersText: string;
}

export type FilterAction =
| {
      type: iFilterActionTypes.OPEN_FORM;
      payload: HTMLDivElement | null;
  }
| {
      type: iFilterActionTypes.CLOSE_FORM;
      payload: HTMLDivElement | null;
  }
| {
      type: iFilterActionTypes.CLEAR_FILTER;
  };

Now if I want to create a reducer that implements this interface

 export interface iDocumentTypeFilterState extends iFilterState {
    checked: number[];
   }

export const documentTypeReducer: iFilterReducer = (
    state: documentTypeFilterStateType,
    action: documentTypeFilterAction
) => {...

I get this error:

Types of parameters 'state' and 'state' are incompatible. Property 'checked' is missing in type 'iFilterState' but required in type 'iDocumentTypeFilterState'

So to summarize: Reducer is a function that accepts an object (state). I want the state to comply to a certain interface but also allow other key/value pairs on it

How would I need to structure this to achieve my goal?

GlutVonSmark
  • 284
  • 2
  • 9

0 Answers0