Как типизировать middleware в redux store?

Question

[Kolya112151]

Имеется store:

export const createReduxStore = (initialState?: StateSchema) => {
  
  const rootReducer: ReducersMapObject<StateSchema> = {
    user: userReducer,
    login: loginReducer,
    [rtkApi.reducerPath]: rtkApi.reducer
  }

  return configureStore<StateSchema>({
    reducer: rootReducer,
    devTools: __IS_DEV__,
    preloadedState: initialState,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().concat(rtkApi.middleware)
  })
}

Но при добавлении rtkApi.middleware, через concat, появляется typescript ругается на несовместимость типов:

Текст ошибки

Type '(getDefaultMiddleware: GetDefaultMiddleware<StateSchema>) => Tuple<[ThunkMiddleware<StateSchema, UnknownAction>, Middleware<...>]>' is not assignable to type '(getDefaultMiddleware: GetDefaultMiddleware<StateSchema>) => Tuple<[ThunkMiddleware<StateSchema, UnknownAction>]>'.
  Type 'Tuple<[ThunkMiddleware<StateSchema, UnknownAction>, Middleware<{}, RootState<{}, string, "rtkApi">, ThunkDispatch<any, any, UnknownAction>>]>' is not assignable to type 'Tuple<[ThunkMiddleware<StateSchema, UnknownAction>]>'.
    Type '[ThunkMiddleware<StateSchema, UnknownAction>, Middleware<{}, RootState<{}, string, "rtkApi">, ThunkDispatch<any, any, UnknownAction>>]' is not assignable to type '[ThunkMiddleware<StateSchema, UnknownAction>]'.
      Source has 2 element(s) but target allows only 1.ts(2322)
configureStore.d.ts(25, 5): The expected type comes from property 'middleware' which is declared here on type 'ConfigureStoreOptions<StateSchema, UnknownAction, Tuple<[ThunkMiddleware<StateSchema, UnknownAction>]>, Tuple<...>, StateSchema>'
(property) ConfigureStoreOptions<StateSchema, UnknownAction, Tuple<[ThunkMiddleware<S, UnknownAction>]>, Tuple<[StoreEnhancer<{ dispatch: ExtractDispatchExtensions<M>; }>, StoreEnhancer]>, S>.middleware?: ((getDefaultMiddleware: GetDefaultMiddleware<StateSchema>) => Tuple<[ThunkMiddleware<S, UnknownAction>]>) | undefined
An array of Redux middleware to install, or a callback receiving getDefaultMiddleware and returning a Tuple of middleware. If not supplied, defaults to the set of middleware returned by getDefaultMiddleware().

@example

`middleware: (gDM) => gDM().concat(logger, apiMiddleware, yourCustomMiddleware)`
@see — https://redux-toolkit.js.org/api/getDefaultMiddleware#intended-usage

Я так понял, в ошибке говорится, что возвращаться должен массив с 1 элементом, а возвращается с 2 элементами. Но как тогда добавлять дополнительные middleware?

Comments

[Антон Иванов]

getDefaultMiddleware().concat([...rtkApi.middleware])

[Kolya112151]

Антон Иванов, к сожалению не помогло. А что-то меняется от такого написания?

Answer 1

[Kolya112151]

Убрать StateSchema, прокинутое в configureStore, он сам подхватит типы