首页 > 解决方案 > Redux + typescript:如何实现`injectReducer`?

问题描述

我正在开发一个打字稿反应应用程序,使用 redux 来管理状态。

为了动态添加 reducer,redux 建议实现一个injectReducerfunction

我已经在一个 Javascript 项目中做到了这一点,但我不知道如何用打字稿来做到这一点。

任何建议都会非常有帮助!

到目前为止我已经尝试过:

export interface AppStore extends EnhancedStore<{}> {
  injectedReducers?: any;
}

const store: AppStore = configureStore({
  reducer: createReducer(),
  devTools: process.env.NODE_ENV !== "production",
});

store.injectedReducers = {};

export const injectReducer = (key: string, reducer: Reducer<object>) => {
  if (store.injectedReducers[key]) {
    return;
  }
  store.injectedReducers[key] = reducer;
  
  store.replaceReducer(createReducer(store.injectedReducers));
  return store;
};

export default function createReducer(injectedReducers?: any) {
  return combineReducers({
    global: globalReducer,
    ...injectedReducers,
  });
}

这是来自的错误消息createReducer(store.injectedReducers!)

Argument of type 'Reducer<CombinedState<{ [x: string]: unknown; }>, never>' is not assignable to parameter of type 'Reducer<{}, AnyAction>'.
  Types of parameters 'action' and 'action' are incompatible.
    Type 'AnyAction' is not assignable to type 'never'.ts(2345)

标签: reactjstypescriptredux

解决方案


推荐阅读