reactjs - TypeScript Ta bort upprepad egendomsassignering med React-Redux

Jag använder TS React Redux och mitt app-tillstånd ser ut ungefär så här

type AppState = {
   foo: number
   bar: number
   baz: number
}

och jag har en komponent som är kopplad till redux på detta sätt

type ComponentState = {
   foo: number
   bar: number
}

function mapStateToProps(state: AppState): ComponentState{
   return {
      foo: state.foo,
      bar: state.bar
   }
}

Min fråga är att i mapStateToProps, finns det något sätt att kopiera över props utan att behöva välja varje enskild? Eftersom ComponentState är en delmängd av AppState känns det som att det finns ett uppenbart sätt att göra detta som jag missar.

Svar #1

Om du använder connect och TypeScript tillsammans rekommenderar vi specifikt att använda mönstret ConnectedProps<T> för att härleda typen av alla props som skickas från connect till din komponent. Det kommer att eliminera behovet av att skriva det ComponentState-gränssnittet om du inte vill, eftersom TS också härleder returtypen för mapState.

Du bör också överväga att använda vår useSelector-hook i funktionskomponenter, eftersom det är lättare att typa än vad connect är.

Svar #2

du kan destrukturera de objekt du vill använda, men en mapStateToProps-funktion är platsen där du definierar vad som ska tas ut från tillståndet för att ges till komponenten.

function mapStateToProps({foo, bar}: AppState): ComponentState {
   return { foo, bar }
}

om du ville göra ett mer funktionellt tillvägagångssätt kunde du göra något som detta

const myComponentKeys: Array<keyof ComponentState> = ['foo', 'bar']
function mapStateToProps(state: AppState): ComponentState {
   return pick(myComponentKeys, state)
}