Typing issue when initializing store with preloaded state in RTK 2

[medihack]

In RTK 1.x I used the following code to initialize a store in a Next.js app:

export function initStore(preloadedState?: PreloadedState<CombinedState<RootState>>) {
  const store = configureStore({
    reducer,
    preloadedState,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(historyMiddleware),
  })

  return store
}

In RTK 2.x there is no PreloadedState and CombinedState anymore. Unfortunately, I don't fully understand the migration guide. I tried to use Partial<RootState> instead of PreloadedState<CombinedState<RootState>>, but that does not seem to be accepted with errors like this for reducer and middleware:

Type '{ designer: Reducer<DesignerState>; }' is not assignable to type 'Reducer<{ designer: DesignerState; }, UnknownAction, Partial<{ designer: DesignerState; }>> | { designer: Reducer<DesignerState, UnknownAction, DesignerState | undefined>; }'.
  Type '{ designer: Reducer<DesignerState>; }' is not assignable to type '{ designer: Reducer<DesignerState, UnknownAction, DesignerState | undefined>; }'.
    Types of property 'designer' are incompatible.
      Type 'Reducer<DesignerState>' is not assignable to type 'Reducer<DesignerState, UnknownAction, DesignerState | undefined>'.
        Type 'DesignerState | undefined' is not assignable to type 'DesignerState'.
          Type 'undefined' is not assignable to type 'DesignerState'.ts(2322)

Only using RootState works, but I don't want to preload the full state, but only some slices. What else could I try?

[markerikson]

Per https://redux.js.org/usage/migrations/migrating-rtk-2#preloadedstate-type-removed-in-favour-of-reducer-generic , the PreloadedState generic has been removed.

Partial<RootState> is fine. Also see #3946 (comment) .

[EskiMojo14]

also see the comment above it if you're using redux-persist

[markerikson]

Hmm. Sorry @medihack , re-reading the initial comment, it sounds like you're saying that TS error is happening if you do use Partial<RootState>.

Can you show how you're defining reducer here?

[medihack]

Thanks for looking into this. Sure, below is my reducer. I have some more complicated ones, but I deleted all other reducers and the error occurs when using only this one:

import { PayloadAction, createSlice } from "@reduxjs/toolkit"
import { RootState } from "RootTypes"

interface DesignerState {
  editing: boolean
  menuTimestamp: number
  selectedItem: string | null
}

export const initialState: DesignerState = {
  editing: false,
  menuTimestamp: Date.now(),
  selectedItem: null,
}

export const designerSlice = createSlice({
  name: "designer",
  initialState,
  reducers: {
    refreshMenu(state) {
      state.menuTimestamp = Date.now()
    },
    setEditing(state, action: PayloadAction<boolean>) {
      state.editing = action.payload
    },
    setSelectedItem(state, action: PayloadAction<string | null>) {
      state.selectedItem = action.payload
    },
  },
})

export const { refreshMenu, setEditing, setSelectedItem } = designerSlice.actions

export default designerSlice.reducer

export const selectEditing = (state: RootState) => state.designer.editing

export const selectMenuTimestamp = (state: RootState) => state.designer.menuTimestamp

export const selectSelectedItem = (state: RootState) => state.designer.selectedItem

Here is how I define RootTypes in redux.d.ts:

declare module "RootTypes" {
  // Defined here to prevent circular dependencies
  // with help from https://stackoverflow.com/a/66324900/166229
  import { AnyAction, StateFromReducersMapObject, ThunkAction } from "@reduxjs/toolkit"

  export type RootState = StateFromReducersMapObject<typeof import("../src/state/store").reducer>
  export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, any, AnyAction>
}

And here is how I try to initialize the store now:

export function initStore(preloadedState?: Partial<RootState>) {
  const store = configureStore({
    reducer: {
      designer: designerReducer,
    },
    preloadedState,
  })

  return store
}

with the error:

Type 'Reducer<DesignerState>' is not assignable to type 'Reducer<DesignerState, UnknownAction, DesignerState | undefined>'.
  Type 'DesignerState | undefined' is not assignable to type 'DesignerState'.
    Type 'undefined' is not assignable to type 'DesignerState'.ts(2322)

[markerikson]

I suspect that StateFromReducersMapObject<typeof import("../src/state/store").reducer> type is what's causing the issue, but not 100% sure.

You could try moving the root reducer creation outside and deriving the root state type from that:

const rootReducer = combineReducers({
  designer: designerReducer
});
export type RootState = ReturnType<typeof rootReducer>;

[EskiMojo14]

for the record, types can't cause circular dependencies, because they don't exist during runtime. bundlers are generally smart enough to remove their imports too.

i've never had an issue with exporting RootState and AppDispatch from the store file 😕

ah, misunderstood - the circular type comes from initializeStore. then I agree with Mark - the best option is to move the reducer creation outside of initializeStore.

[medihack]

Thanks a lot for your help! With combineReducers defined outside initStore everything works perfectly again :-)