cartStore.ts aus Kapitel 12 ist bereits typisiert – jetzt folgt der Redux-Toolkit-Favoritenstore aus Kapitel 3, GENAU wie in "React für Profis" Kapitel 42, plus ein React-Native-spezifisches Detail: Reanimateds useSharedValue.

favoritesSlice.js zu favoritesSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface FavoritesState {
  skus: string[];
}

const initialState: FavoritesState = { skus: [] };

const favoritesSlice = createSlice({
  name: 'favorites',
  initialState,
  reducers: {
    toggleFavorite(state, action: PayloadAction<string>) {
      const sku = action.payload;
      if (state.skus.includes(sku)) {
        state.skus = state.skus.filter((s) => s !== sku);
      } else {
        state.skus.push(sku);
      }
    },
  },
});

export const { toggleFavorite } = favoritesSlice.actions;
export default favoritesSlice.reducer;

store/index.js zu index.ts

import { configureStore } from '@reduxjs/toolkit';
import favoritesReducer from './favoritesSlice';

export const store = configureStore({
  reducer: {
    favorites: favoritesReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

store/hooks.ts anlegen: typisierte useSelector/useDispatch

Identisches Muster zu "React für Profis" Kapitel 42:

import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux';
import type { RootState, AppDispatch } from './index';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Ab jetzt useAppSelector/useAppDispatch statt der "nackten" Hooks aus react-redux verwenden – der Selektor-Parameter bekommt automatisch den korrekten RootState-Typ:

// In FavoritesScreen.tsx / ProductListScreen.tsx:
import { useAppSelector, useAppDispatch } from '../store/hooks';

const favoriteSkus = useAppSelector((state) => state.favorites.skus);
const dispatch = useAppDispatch();

Reanimated-Hooks: automatisch typisiert, mit einer Ausnahme

useSharedValue, useAnimatedStyle und withSpring aus Kapitel 9/13 sind bereits VOLLSTÄNDIG typisiert, ohne dass wir etwas tun müssen – useSharedValue(1) leitet automatisch SharedValue<number> ab, GENAU wie useState(1) automatisch number ableitet (siehe "React für Profis" Kapitel 42). EINE Stelle braucht dennoch Aufmerksamkeit: runOnJS aus dem Gesture-Handler-Kapitel.

import { runOnJS } from 'react-native-reanimated';

function onRemove(sku: string): void {
  // ...
}

// TypeScript prüft, dass die Argumente von runOnJS(onRemove) zur Signatur von onRemove passen:
runOnJS(onRemove)(item.sku); // sku: string - passt zu (sku: string) => void

Gesture.Pan() Events typisieren

import { Gesture } from 'react-native-gesture-handler';
import { GestureUpdateEvent, PanGestureHandlerEventPayload } from 'react-native-gesture-handler';

const panGesture = Gesture.Pan().onUpdate(
  (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
    translateX.value = Math.min(0, event.translationX);
  }
);

In der Praxis leitet TypeScript den Event-Typ innerhalb von .onUpdate(...) meistens AUTOMATISCH korrekt ab, ohne die explizite Annotation – sie ist hier zur VERDEUTLICHUNG gezeigt, welcher Typ tatsächlich dahintersteckt, für den Fall, dass Sie event in eine separate, benannte Funktion auslagern (dort wird die explizite Annotation dann PFLICHT).