0Pricing
Frontend Academy · Lekcja

Redux Toolkit: createSlice i configureStore

Proszę definiować wycinki stanu za pomocą createSlice, łączyć je w configureStore oraz wysyłać akcje z komponentów React przy użyciu useDispatch i useSelector.

Redux Toolkit: createSlice i configureStore to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Dlaczego Redux Toolkit?

Redux Toolkit (RTK) to oficjalny, narzucający określony sposób pracy sposób tworzenia logiki Redux. Eliminuje powtarzalny kod zwykłego Redux: nie trzeba ręcznie definiować ciągów typów akcji, rozbudowanych reduktorów ani skomplikowanej konfiguracji store.

Instalowanie Redux Toolkit

Należy zainstalować zarówno RTK, jak i powiązanie z Reactem.

npm install @reduxjs/toolkit react-redux

createSlice — stan + reduktor + akcje

createSlice tworzy fragment stanu wraz z jego reduktorem i kreatorami akcji w jednym wywołaniu. Wewnętrznie używa biblioteki Immer do wykonywania niezmiennych aktualizacji.

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 — składanie store

configureStore tworzy store Redux z rozsądnymi ustawieniami domyślnymi: Redux DevTools są włączone, a oprogramowanie pośredniczące thunk jest dołączone.

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;

Udostępnianie store

Należy opakować aplikację komponentem <Provider store={store}> z react-redux.

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

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

useSelector — odczytywanie stanu

useSelector(selector) odczytuje dane ze store. Komponent jest renderowany ponownie, gdy wybrany fragment stanu się zmieni.

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 — wysyłanie akcji

useDispatch() zwraca funkcję dispatch store. Należy wywołać ją z kreatorem akcji, aby wywołać zmianę stanu.

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 — akcje asynchroniczne

Funkcja createAsyncThunk biblioteki RTK obsługuje operacje asynchroniczne (wywołania API) i automatycznie wysyła akcje 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 — wbudowane pobieranie danych

RTK Query (część RTK) zapewnia automatyczne pobieranie danych, buforowanie i unieważnianie danych. Należy zdefiniować punkty końcowe API, aby otrzymać wygenerowane hooki.

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 w reduktorach

RTK wewnętrznie używa Immer, dlatego reduktory fragmentów stanu mogą bezpośrednio modyfikować stan. Immer wykrywa modyfikacje i tworzy nowy, niezmienny obiekt stanu — otrzymujemy wygodę modyfikowania stanu przy zachowaniu bezpieczeństwa niezmienności.

Redux DevTools

Rozszerzenie przeglądarki Redux DevTools pozwala sprawdzać każdą wysłaną akcję i wynikowy stan, a nawet podróżować w czasie: przechodzić do dowolnego wcześniejszego stanu. Jest nieocenione podczas debugowania złożonych przepływów stanu.

Szybkie sprawdzenie

Co funkcja createSlice biblioteki Redux Toolkit generuje automatycznie?

Podsumowanie: Redux Toolkit

createSlice łączy reduktor i akcje w jednej definicji. Immer pozwala bezpiecznie „modyfikować” stan. configureStore składa reduktory wraz z DevTools i thunk. useSelector odczytuje stan. useDispatch wysyła akcje. createAsyncThunk służy do przepływów asynchronicznych. RTK Query zapewnia kompleksowe pobieranie danych z buforowaniem.

Często zadawane pytania

Czy lekcja „Redux Toolkit: createSlice i configureStore” jest bezpłatna?

Tak — pełny tekst „Redux Toolkit: createSlice i configureStore” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Redux Toolkit: createSlice i configureStore”?

Proszę definiować wycinki stanu za pomocą createSlice, łączyć je w configureStore oraz wysyłać akcje z komponentów React przy użyciu useDispatch i useSelector. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Redux Toolkit: createSlice i configureStore”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Redux Toolkit: createSlice i configureStore
  2. Zustand do lekkiego zarządzania stanem React
  3. Pinia dla Vue: defineStore i storeToRefs
  4. Kiedy używać stanu globalnego, a kiedy lokalnego
← Powrót do Frontend Academy