reactjs - Tipovi definicija za Redux (Toolkit) spremnik s unaprijed učitanim stanjem

Pokušavam da tipizacije rade za konfiguriranje Redux spremišta s unaprijed učitanim stanjem.

Vodič za brzo početak s Redux Toolkit-om u TypeScriptu ima ovaj primjer:

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
  reducer: {
    one: oneSlice.reducer,
    two: twoSlice.reducer
  }
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

Nažalost, s unaprijed učitanim stanjem, to izgleda više ovako:

export function initStore(preloadedState) {
  const store = configureStore({
    reducer: {
      one: oneSlice.reducer,
      two: twoSlice.reducer
    },
    preloadedState,
  })

  return store
}

Odakle sada dobivam tip RootState i tip AppDispatch?

Odgovor #1

Stanje iz Reducera

Možete zaključiti tip vašeg stanja na temelju tipova argumenata vaših reduktora. Želit ćemo razdvojiti vrijednost reducer u poseban const kako bismo mogli koristiti typeof samo na reduktoru.

const reducer = {
  one: oneSlice.reducer,
  two: twoSlice.reducer
};

Koristite objekt slice reducera umjesto funkcije kreirane s combineReducers. Redux toolkit izvezi pomoćni tip koji možemo koristiti za izvođenje stanja iz notacije objekta mapa reducera.

import { StateFromReducersMapObject } from "@reduxjs/toolkit";

export type RootState = StateFromReducersMapObject<typeof reducer>

Tipovi povratka

Jednako tako mogli bismo dobiti tip za Store promatrajući ReturnType od initStore i zatim dobiti RootState promatrajući ReturnType metode getState pohranjenog store. To bi bilo najsličnije primjeru. Isti pristup također nam omogućuje da dobijemo tip za AppDispatch. Imajte na umu da koristimo zagradnu notaciju umjesto točkaste notacije jer je naš Store type, a ne object.

type Store = ReturnType<typeof initStore>
type RootState = ReturnType<Store['getState']>
type AppDispatch = Store['dispatch']

Tip unaprijed učitanog stanja

Prednost odvajanja reducer-a izvan initStore-a je u tome što sada možemo koristiti tipove iz reducera za deklariranje odgovarajućeg tipa za argument preloadedState, koji prije nije bio tipiziran.

import { configureStore, Slice, StateFromReducersMapObject, PreloadedState } from "@reduxjs/toolkit";

const reducer = {
  one: oneSlice.reducer,
  two: twoSlice.reducer
};

export type RootState = StateFromReducersMapObject<typeof reducer>

export function initStore(preloadedState?: PreloadedState<RootState>) {
  return configureStore({
    reducer,
    preloadedState,
  });
}

type Store = ReturnType<typeof initStore>

export type AppDispatch = Store['dispatch']

Poveznica na Typescript Playground

Povezani članci