Redux-Toolkit-Slices und Thunks typisieren
Verwenden Sie createSlice und createAsyncThunk mit vollständiger Typinferenz.
Redux-Toolkit-Slices und Thunks typisieren ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Redux Toolkit typisieren?
Redux Toolkit (RTK) bietet hervorragende TypeScript-Unterstützung. Eine korrekte Typisierung stellt sicher, dass Aktionen, State und asynchrone Thunks ohne manuelle Typzusicherungen typsicher sind.
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";Das State-Interface typisieren
Definieren Sie den State Ihres Slice als TypeScript-Interface, bevor Sie den Slice erstellen.
interface UserState {
users: User[];
loading: boolean;
error: string | null;
}
const initialState: UserState = {
users: [],
loading: false,
error: null,
};createSlice mit typisiertem State
Übergeben Sie den State-Typ als generischen Typ, damit Reducer einen korrekt typisierten State erhalten.
const userSlice = createSlice({
name: "users",
initialState,
reducers: {
setLoading(state, action: PayloadAction<boolean>) {
state.loading = action.payload; // state: UserState — typed
},
},
});PayloadAction typisieren
Verwenden Sie PayloadAction aus RTK, um action.payload in Reducern zu typisieren.
import { PayloadAction } from "@reduxjs/toolkit";
reducers: {
addUser(state, action: PayloadAction<User>) {
state.users.push(action.payload); // action.payload: User
},
}createAsyncThunk mit Typen
Geben Sie Typen für den Rückgabewert, das Thunk-Argument und die Konfiguration der Thunk-API an.
const fetchUsers = createAsyncThunk<User[], void, { rejectValue: string }>(
"users/fetchAll",
async (_, { rejectWithValue }) => {
try {
return await api.getUsers();
} catch (e) {
return rejectWithValue("Failed to fetch");
}
}
);Thunk-Aktionen in extraReducers verarbeiten
Verwenden Sie die builder-Callback-API, um ausstehende, erfolgreiche und fehlgeschlagene Thunk-Aktionen vollständig typisiert zu verarbeiten.
const userSlice = createSlice({
name: "users",
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchUsers.pending, (state) => { state.loading = true; })
.addCase(fetchUsers.fulfilled, (state, action) => {
state.users = action.payload; // action.payload: User[]
state.loading = false;
})
.addCase(fetchUsers.rejected, (state, action) => {
state.error = action.payload ?? "Unknown error";
});
},
});Typisierte RootState und AppDispatch
Exportieren Sie RootState und AppDispatch in typisierter Form aus der Store-Datei, damit sie in Selectors und Hooks verwendet werden können.
import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({ reducer: { users: userSlice.reducer } });
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;Typisierte useSelector- und useDispatch-Hooks
Erstellen Sie typisierte Varianten der Redux-Hooks, damit Sie Typzusicherungen nicht in jeder Komponente wiederholen müssen.
import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;Typisierung von RTK Query
RTK Query generiert aus Ihren Endpoint-Definitionen vollständig typisierte Hooks – eine manuelle Typisierung von Antworten ist nicht erforderlich.
const api = createApi({
reducerPath: "api",
baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
endpoints: (build) => ({
getUser: build.query<User, string>({
query: (id) => `/users/${id}`,
}),
}),
});
export const { useGetUserQuery } = api;Selector-Typisierung
Schreiben Sie typisierte Selector mit RootState, um typsicheren Zugriff auf den State sicherzustellen.
const selectUsers = (state: RootState): User[] => state.users.users;
const selectLoading = (state: RootState): boolean => state.users.loading;Zusammenfassung: Typisiertes RTK
Redux Toolkit mit TypeScript: Definieren Sie ein State-Interface, verwenden Sie PayloadAction in Reducern, typisieren Sie die Generics von createAsyncThunk, exportieren Sie RootState und AppDispatch und erstellen Sie typisierte Hook-Wrapper.
Kurzer Check
Welche Typannotation macht action.payload in einem RTK-Reducer typsicher?
Das haben Sie gelernt
Redux Toolkit mit TypeScript: Definieren Sie State-Interfaces für Slices, verwenden Sie PayloadAction in Reducern, typisieren Sie createAsyncThunk mit drei Generics und exportieren Sie typisierte RootState/AppDispatch mit Hook-Wrappern zur Verwendung in Komponenten.
Häufig gestellte Fragen
Ist die Lektion „Redux-Toolkit-Slices und Thunks typisieren“ kostenlos?
Ja — der vollständige Text von „Redux-Toolkit-Slices und Thunks typisieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Redux-Toolkit-Slices und Thunks typisieren“?
Verwenden Sie createSlice und createAsyncThunk mit vollständiger Typinferenz. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um TypeScript Academy zu starten?
Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Redux-Toolkit-Slices und Thunks typisieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Redux-Toolkit-Slices und Thunks typisieren
- Muster zur Typisierung von Zustand-Stores
- XState: typisierte Zustandsautomaten
- Abgeleiteter State und Selektoren mit Typen