0Pricing
Frontend Academy · Lektion

Redux Toolkit: createSlice und configureStore

Definieren Sie State-Slices mit createSlice, kombinieren Sie sie in configureStore und dispatchen Sie aus React-Komponenten Actions mit useDispatch und useSelector.

Redux Toolkit: createSlice und configureStore ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Redux Toolkit?

Redux Toolkit (RTK) ist die offizielle, meinungsstarke Methode zum Schreiben von Redux-Logik. Es beseitigt den Boilerplate-Code von einfachem Redux: keine manuellen Action-Type-Strings, keine ausführlichen Reducer und keine komplexe Store-Einrichtung.

Redux Toolkit installieren

Installieren Sie sowohl RTK als auch das React-Binding.

npm install @reduxjs/toolkit react-redux

createSlice — State + Reducer + Actions

createSlice erstellt in einem einzigen Aufruf einen State-Ausschnitt mit seinem Reducer und seinen Action Creators. Intern verwendet es Immer für unveränderliche Aktualisierungen.

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value++; },     // Immer: mutate directly
    decrement: state => { state.value--; },
    reset: state => { state.value = 0; },
    incrementBy: (state, action) => { state.value += action.payload; }
  }
});

export const { increment, decrement, reset, incrementBy } = counterSlice.actions;
export default counterSlice.reducer;

configureStore — Den Store zusammenstellen

configureStore erstellt den Redux-Store mit sinnvollen Standardeinstellungen: Redux DevTools sind aktiviert und die Thunk-Middleware ist enthalten.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
import cartReducer from './cartSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    cart: cartReducer,
  }
});

// TypeScript types:
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Den Store bereitstellen

Umschließen Sie Ihre App mit <Provider store={store}> aus react-redux.

import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>
);

useSelector — State lesen

useSelector(selector) liest aus dem Store. Die Komponente wird erneut gerendert, wenn sich der ausgewählte State-Ausschnitt ändert.

import { useSelector } from 'react-redux';
import type { RootState } from './store';

function Counter() {
  const count = useSelector((state: RootState) => state.counter.value);
  return <p>Count: {count}</p>;
}

useDispatch — Actions dispatchen

useDispatch() gibt die Dispatch-Funktion des Stores zurück. Rufen Sie sie mit einem Action Creator auf, um eine State-Änderung auszulösen.

import { useDispatch } from 'react-redux';
import { increment, incrementBy } from './counterSlice';

function Controls() {
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(incrementBy(5))}>+5</button>
    </div>
  );
}

createAsyncThunk — Asynchrone Actions

RTKs createAsyncThunk verarbeitet asynchrone Vorgänge (API-Aufrufe) und dispatcht automatisch die Actions pending/fulfilled/rejected.

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk(
  'user/fetchById',
  async (userId: string) => {
    const res = await fetch(`/api/users/${userId}`);
    return res.json(); // becomes action.payload on fulfilled
  }
);

// In slice:
extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, state => { state.loading = true; })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload;
    });
}

RTK Query — Integriertes Abrufen von Daten

RTK Query (Bestandteil von RTK) bietet automatisches Abrufen, Caching und Invalidieren von Daten. Definieren Sie API-Endpunkte und erhalten Sie generierte Hooks.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (build) => ({
    getUsers: build.query<User[], void>({ query: () => 'users' }),
  })
});

// Generated hook:
const { data, isLoading, error } = api.useGetUsersQuery();

Immer in Reducern

RTK verwendet intern Immer, daher können Slice-Reducer den State direkt verändern. Immer erkennt die Änderungen und erzeugt ein neues unveränderliches State-Objekt — Sie erhalten die einfache Handhabung von Veränderungen mit der Sicherheit unveränderlicher Daten.

Redux DevTools

Die Browser-Erweiterung Redux DevTools ermöglicht es Ihnen, jede dispatchte Action, den daraus resultierenden State und sogar Zeitreisen zu untersuchen: Springen Sie zu jedem vorherigen State. Für das Debugging komplexer State-Abläufe ist sie unverzichtbar.

Schnelltest

Was erzeugt createSlice in Redux Toolkit automatisch?

Zusammenfassung: Redux Toolkit

createSlice kombiniert Reducer und Actions in einer Definition. Immer ermöglicht es, den State sicher zu „verändern“. configureStore stellt Reducer mit DevTools und Thunk zusammen. useSelector liest den State. useDispatch dispatcht Actions. createAsyncThunk ist für asynchrone Abläufe gedacht. RTK Query übernimmt das vollständige Abrufen von Daten mit Caching.

Häufig gestellte Fragen

Ist die Lektion „Redux Toolkit: createSlice und configureStore“ kostenlos?

Ja — der vollständige Text von „Redux Toolkit: createSlice und configureStore“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Redux Toolkit: createSlice und configureStore“?

Definieren Sie State-Slices mit createSlice, kombinieren Sie sie in configureStore und dispatchen Sie aus React-Komponenten Actions mit useDispatch und useSelector. Du übst Frontend 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend 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: createSlice und configureStore“?

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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend 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

  1. Redux Toolkit: createSlice und configureStore
  2. Zustand für schlanken React-State
  3. Pinia für Vue: defineStore und storeToRefs
  4. Wann globalen und lokalen State verwenden
← Zurück zu Frontend Academy