TypeScript 错误 - Redux 中间件属性 0

Question

我在设置中间件时遇到以下错误。使用 Redux observable/Redux 工具包。关于为什么会发生这种情况的任何输入？

遵循以下回购设置。 https://github.com/beast911/react-redux-observables-typescript

import systemReducer, {
  getInfoStart,
  getInfoSuccess,
  getInfoFailed,
  addInfoStart,
  addInfoSuccess,
  addInfoFailed,
  editInfoStart,
  editInfoSuccess,
  editInfoFailed,
  deleteInfoStart,
  deleteInfoSuccess,
  deleteInfoFailed,
  completeInfoStart,
  completeInfoSuccess,
  completeInfoFailed,
} from "./system/slice";

import {
  combineReducers,
  configureStore,
  getDefaultMiddleware,
} from "@reduxjs/toolkit";
import { createBrowserHistory } from "history";
import { combineEpics, createEpicMiddleware } from "redux-observable";
import {
  getInfoEpic,
  addInfoEpic,
  completeInfoEpic,
  deleteInfoEpic,
  editInfoEpic,
} from "./system/epics";
import { ActionType } from "typesafe-actions";
import {
  connectRouter,
  routerMiddleware,
  RouterState,
} from "connected-react-router";

type SystemActionsWithPayload =
  | typeof getInfoStart
  | typeof getInfoSuccess
  | typeof getInfoFailed
  | typeof addInfoStart
  | typeof addInfoSuccess
  | typeof addInfoFailed
  | typeof editInfoStart
  | typeof editInfoSuccess
  | typeof editInfoFailed
  | typeof deleteInfoStart
  | typeof deleteInfoSuccess
  | typeof deleteInfoFailed
  | typeof completeInfoStart
  | typeof completeInfoSuccess
  | typeof completeInfoFailed;

type SystemActions = ActionType<SystemActionsWithPayload>;

type finalActions = SystemActions;

const epics = combineEpics(
  getInfoEpic,
  addInfoEpic,
  completeInfoEpic,
  deleteInfoEpic,
  editInfoEpic
);

export const history = createBrowserHistory<RouterState>();
export const rootReducer = combineReducers({
  router: connectRouter(history),
  system: systemReducer,
});
export type RootState = ReturnType<typeof rootReducer>;
const epicMiddleware = createEpicMiddleware<
  finalActions, // input actions
  finalActions, // output actions
  RootState
>();

function configureAppStore(initialState?: any) {
  // configure middlewares
  const middlewares = [routerMiddleware(history), epicMiddleware];
  // create store
  return configureStore<RootState>({
    reducer: rootReducer,
    middleware: middlewares,
    preloadedState: initialState,
  });
}

export const store = configureAppStore();
epicMiddleware.run(epics);

Type 'Middleware<{}, any, Dispatch>[]' is not assignable to type '[ThunkMiddleware<CombinedState<{ router: RouterState<RouterState>; system: TaskState; }>, AnyAction, null> | ThunkMiddleware<...>] | ((getDefaultMiddleware: CurriedGetDefaultMiddleware<...>) => [...]) | undefined'. Property '0' is missing in type 'Middleware<{}, any, Dispatch>[]' but required in type '[ThunkMiddleware<CombinedState<{ router: RouterState<RouterState>; system: TaskState; }>, AnyAction, null> | ThunkMiddleware<...>]'

Answer 1

不应使用手动指定的泛型调用大多数 Redux Toolkit api。

通过调用 return configureStore<RootState>(...，您实际上从商店中删除了有关中间件的所有信息。跳过泛型，只需调用 return configureStore(... 并让 TypeScript 从用法中推断出正确的类型。

TypeScript 错误 - Redux 中间件属性 0

TypeScript Error - Redux Middleware property 0

typescript

redux

middleware

redux-observable

redux-toolkit

TypeScript 错误 - Redux 中间件 属性 0

TypeScript Error - Redux Middleware property 0

typescript

redux

middleware

redux-observable

redux-toolkit

TypeScript 错误 - Redux 中间件属性 0