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?