Redux 4.2.0 breaks PreloadedState type?

[sekoyo]

PreloadedState was previously working in that top levels keys were optional:

/**
 * Recursively makes combined state objects partial. Only combined state _root
 * objects_ (i.e. the generated higher level object with keys mapping to
 * individual reducers) are partial.
 */

After upgrading 4.1.2 -> 4.2.0 however, the store keys are no longer optional:

const rootReducer = combineReducers({
  assetConfig: AssetConfigReducer,
  coinConfiguration: CoinConfigurationReducer,
  buyCrypto: BuyCryptoReducer,
  chat: ChatReducer,
  coinDetails: CoinDetailsReducer,
  convertCrypto: ConvertCryptoReducer,
  depositAddress: DepositReducer,
  earn: EarnReducer,
  indices: IndicesReducer,
  markets: MarketsReducer,
  savedAddress: SavedAddressReducer,
  security: SecurityReducer,
  stake: StakeReducer,
  trade: TradeReducer,
  user: UserReducer,
  walletSummary: WalletSummaryReducer,
  walletTxnHistory: TransactionHistoryReducer,
  withdraw: WithdrawReducer,
  KYC: KYCReducer,
});

type RootState = ReturnType<typeof rootReducer>;

PreloadedState<RootState> now requires that all reducer keys are present.

Previously you could pass in just the parts of the store you want to be non-default:

const setupStore = (preloadedState?: PreloadedState<RootState>) =>
  configureStore({
    reducer: RootReducer,
    preloadedState,
    // ....
  });

const renderWithProviders = (
  children: React.ReactNode,
  preloadedState?: PreloadedState<RootState>,
) => {
  const store = setupStore({
    // ...
    ...preloadedState,
  });
  return renderer.create(<Provider store={store}>...</Provider>);
}

const tree = renderWithProviders(
      <CoinDetailsScreen navigation={navigation} route={route} />,
      {
        earn: {
          ...initialEarnState,
          displayContracts: [],
        },
      },
    );

Now such code results in a TS error as all reducer keys are expected:

|Argument of type '{ earn: { displayContracts: never[]; isLoading: boolean; error: ErrorState; status: boolean; subscriptions: Subscription[]; subscriptionBalances: SubscriptionBalance[]; activeContracts: Contract[]; balanceDetails: { ...; }; subscribeTransaction: SubscribeTransaction; }; }' is not assignable to parameter of type '{ readonly [$CombinedState]?: undefined; assetConfig: { assets: { [x: string]: { asset: string; currency: string; name: string; majorCurrency: string; currencyType: string; scale: number; enabled: boolean; ... 4 more ...; networks: { ...; }[]; } | undefined; }; assetToCurrency: { ...; }; networks: { ...; }; }; ... 1...'.
  Type '{ earn: { displayContracts: never[]; isLoading: boolean; error: ErrorState; status: boolean; subscriptions: Subscription[]; subscriptionBalances: SubscriptionBalance[]; activeContracts: Contract[]; balanceDetails: { ...; }; subscribeTransaction: SubscribeTransaction; }; }' is missing the following properties from type '{ readonly [$CombinedState]?: undefined; assetConfig: { assets: { [x: string]: { asset: string; currency: string; name: string; majorCurrency: string; currencyType: string; scale: number; enabled: boolean; ... 4 more ...; networks: { ...; }[]; } | undefined; }; assetToCurrency: { ...; }; networks: { ...; }; }; ... 1...': assetConfig, coinConfiguration, buyCrypto, chat, and 14 more.ts(2345)

[markerikson]

That shouldn't be the case - the only change in 4.2.0 was the deprecation of createStore, no changes to the typedefs:

v4.1.2...v4.2.0

Did you upgrade any other packages?

[sekoyo]

Thank you I did, will investigate