如何在TS中正确键入"Redux"增强器

Question

我想将meaingOfFile属性添加到我的redux状态：

...
type CustomProps = 
{
meaingOfFile: number;
}
const ResourceEnhancer: StoreEnhancer<{}, CustomProps> = (createStore) => (reducer, initialState) =>
{
console.log("custom enhancer");
const store = createStore(reducer, initialState);

function getNewState()
{
return {
...store.getState(),
meaingOfFile: 32,
}
}

return { ...store, getState: getNewState};
}
const Store = configureStore({
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(LocalStorageMiddleware),
enhancers: (defaultEnhancers) => [ResourceEnhancer, ...defaultEnhancers],
reducer:{
books: BooksSlice.reducer,
shelfs: ShelfsSlice.reducer,
}
});

但TS抛出错误：

TS2322: Type '<S = any, A extends Action<any> = AnyAction>(reducer: Reducer<S, A>, initialState: PreloadedState<S> | undefined) => { getState: () => S & { ...; }; dispatch: Dispatch<...>; subscribe(listener: () => void): Unsubscribe; replaceReducer(nextReducer: Reducer<...>): void; [Symbol.observable](): Observable<...>; }' is not assignable to type 'StoreEnhancerStoreCreator<{}, CustomProps>'.
Call signature return types '{ getState: () => S & { meaingOfFile: number; }; dispatch: Dispatch<A>; subscribe(listener: () => void): Unsubscribe; replaceReducer(nextReducer: Reducer<S & {}, A>): void; [Symbol.observable](): Observable<...>; }' and 'Store<S & CustomProps, A>' are incompatible.
The types of 'replaceReducer' are incompatible between these types.
Type '(nextReducer: Reducer<S & {}, A>) => void' is not assignable to type '(nextReducer: Reducer<S & CustomProps, A>) => void'.
Types of parameters 'nextReducer' and 'nextReducer' are incompatible.
Types of parameters 'state' and 'state' are incompatible.
Type '(S & {}) | undefined' is not assignable to type '(S & CustomProps) | undefined'.
Type 'S & {}' is not assignable to type '(S & CustomProps) | undefined'.
Type 'S & {}' is not assignable to type 'S & CustomProps'.
Property 'meaingOfFile' is missing in type '{}' but required in type 'CustomProps'.

Answer 1

不幸的是，configureStore打字员并没有真正支持StoreEnhancer。如果最终要添加额外的属性，则必须使用类型转换手动添加这些属性。

在这种情况下，您可以通过使用自定义的reducer函数包装rootReducer来获得相同的结果。

const rootReducer = combineReducers({
books: BooksSlice.reducer,
shelfs: ShelfsSlice.reducer,
}}
const enhancedReducer = (state, action) => {
return {
...rootReducer(state,action),
meaingOfFile: 32,
}
}
const Store = configureStore({
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(LocalStorageMiddleware),
reducer: enhancedReducer
});