I've been working on developing a custom store enhancer to add new values to my root state. However, I've encountered an unexpected key error after delving into the complexities of custom enhancers. While I can see the new state part in devtools and the application appears to be functioning properly, I'm experiencing
Unexpected key "foo" found in the previous state received by the reducer.
Expected to find one of the known reducer keys instead: [...]. Unexpected keys will be ignored.
which is puzzling to me. I've tried searching for solutions, but none of the resources I came across were specific to a custom store enhancer scenario.
Below is the minimal code that triggers this error. I'm setting up my store like this:
export const store = configureStore({
reducer: mainReducer,
enhancers: [testEnhancer],
});
Where mainReducer simply combines all slices with combineReducers({ "my slices" }), and all the slices are generated using createSlice from RTK.
The testEnhancer function is structured as follows:
type StateExt = { foo: string }
export const testEnhancer: StoreEnhancer<{}, StateExt> = (next: StoreEnhancerStoreCreator): StoreEnhancerStoreCreator<{}, StateExt> => {
return <S, A extends Action = AnyAction>(reducer: Reducer<S, A>, preloadedState?: PreloadedState<S>): Store<S & StateExt, A> => {
const wrappedReducer: Reducer<S & StateExt, A> = (state, action) => {
return { ...reducer(state, action), foo: 'bar' };
};
return next(wrappedReducer, { ...preloadedState, foo: '' });
};
};