How to support SSR redux state with code splitting (injection)

[md384]

I am trying to implement code splitting on an app that uses SSR. The app currently uses an older version of redux-toolkit as well as a few different patterns for defining reducers/selectors/etc but am looking to upgrade to latest redux-toolkit and standardize the code.

The problem I currently have is that my server-side generated state has additional keys, i.e. my server side code has loaded reducers that would be lazy loaded on the client. So when calling configureStore with server generated state results I get an error along the lines of Unexpected key "X" found in previous state received by the reduce ... Unexpected keys will be ignored.. I am currently basing my implementation on https://redux.js.org/usage/code-splitting#defining-an-injectreducer-function but it doesn't look like the redux-toolkit has a solution for this either based on https://redux.js.org/usage/code-splitting#typical-usage and reading docs.

This means that when I inject the reducers lazily on the client, the state is not available (i.e. was dropped when the state was initialized). I have not found anything in the docs that accounts for this so wondering if there are any best practices for supporting SSR and code-splitting.

Currently, I am using

store.injectReducer = (key, asyncReducer) => {
  const patchedAsyncReducer = (state = preloadedState[key], action) => asyncReducer(state, action)
  store.asyncReducers[key] = patchedAsyncReducer
  store.replaceReducer(createReducer(store.asyncReducers))
}

to inject a reducer with preloaded state (preloadedState is just a copy of the server state) but as I upgrade redux-toolkit, I'd like you use the https://redux-toolkit.js.org/api/combineSlices#withlazyloadedslices and https://redux-toolkit.js.org/api/combineSlices#withlazyloadedslices interfaces going forward. Any help would be appreciated.

[markerikson]

Yeah, not sure if we have specific advice here. I'd say that comparing the known reducer keys vs the incoming server state keys is an option - for any state key that doesn't have a reducer yet, add a no-op reducer function reducers[key] = (state) => state, etc). That should satisfy combineReducers.

[md384]

Thanks - this sounds promising together with overrideExisting: true on inject. I'm surprised this hasn't come up before.