connected-router typescript declaring global state type

Question

Newish to typescript - I have defined my global state based on the state of the redux root-reducer. This was working great until I decided to use connected-router - which adds some stuff to the root reducer - now I am uncertain how to declare the global state.

For example... Here is my global state type:

import { StateType } from "typesafe-actions";

declare global {
  export type SpaceState = StateType<
    typeof import("./root_reducer").rootReducer
  >;
}

If I hover over rootReducer I can see the properties I need to access:

const rootReducer: (history: History<unknown>) => Reducer<CombinedState<{
    router: RouterState<unknown>;
    ui: State;
    auth: State;
}>, AnyAction>

Though when creating a redux selector to access my properties, I get a typescript error. First here is my selector, with the error appearing under the .ui property.

export const sidebarStatus = (state: SpaceState) => state.ui.sidebarShow;

Here is the error I am getting:

Property 'ui' does not exist on type 'Reducer<CombinedState<{ router: RouterState<unknown>; ui: State; auth: State; }>, AnyAction>'.

I am assuming, since I added connected-router, that I need to declare my global state in a different way but am at a loss on how to do this. Thanks for any help or pointers in the right direction.

Answer 1

Ahh got it! Had to use ReturnType

import { StateType } from "typesafe-actions";

declare global {
  export type SpaceState = StateType<
    ReturnType<typeof import("./root_reducer").rootReducer>
  >;
}