Frontend Academy · Lezione

Redux Toolkit: createSlice e configureStore

Definire slice dello stato con createSlice, combinarle in configureStore e inviare action dai componenti React usando useDispatch e useSelector.

Redux Toolkit: createSlice e configureStore è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Perché Redux Toolkit?

Redux Toolkit (RTK) è il modo ufficiale e basato su convenzioni per scrivere la logica Redux. Elimina il boilerplate di Redux puro: niente stringhe manuali per i tipi delle action, reducer verbosi o configurazioni complesse dello store.

Installare Redux Toolkit

Installi sia RTK sia il binding per React.

npm install @reduxjs/toolkit react-redux

createSlice — Stato + Reducer + Actions

createSlice crea una porzione di stato con il relativo reducer e gli action creator in una sola chiamata. Internamente usa Immer per gli aggiornamenti immutabili.

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 — Assemblare lo store

configureStore crea lo store Redux con impostazioni predefinite sensate: Redux DevTools abilitato e middleware thunk incluso.

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;

Fornire lo store

Avvolga l'app con <Provider store={store}> di react-redux.

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

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

useSelector — Leggere lo stato

useSelector(selector) legge dallo store. Esegue nuovamente il rendering del componente quando cambia la slice selezionata.

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 — Inviare le action

useDispatch() restituisce la funzione dispatch dello store. La chiami con un action creator per attivare una modifica dello stato.

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 — Action asincrone

createAsyncThunk di RTK gestisce le operazioni asincrone (chiamate API) e invia automaticamente le action 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 — Recupero dei dati integrato

RTK Query (parte di RTK) fornisce automaticamente il recupero, la memorizzazione nella cache e l'invalidazione dei dati. Definisca gli endpoint dell'API e ottenga gli hook generati.

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 nei reducer

RTK usa Immer internamente, quindi i reducer delle slice possono modificare direttamente lo stato. Immer rileva le mutazioni e produce un nuovo oggetto di stato immutabile: si ottiene la praticità della mutazione con la sicurezza dell'immutabilità.

Redux DevTools

L'estensione del browser Redux DevTools consente di ispezionare ogni action inviata, lo stato risultante e persino di viaggiare nel tempo: può passare a qualsiasi stato precedente. È preziosa per il debug di flussi di stato complessi.

Verifica rapida

Che cosa genera automaticamente createSlice in Redux Toolkit?

Riepilogo: Redux Toolkit

createSlice combina reducer e actions in una sola definizione. Immer consente di «modificare» lo stato in sicurezza. configureStore assembla i reducer con DevTools e thunk. useSelector legge lo stato. useDispatch invia le action. createAsyncThunk gestisce i flussi asincroni. RTK Query gestisce il recupero completo dei dati con memorizzazione nella cache.

Domande Frequenti

La lezione «Redux Toolkit: createSlice e configureStore» è gratuita?

Sì — il testo completo di «Redux Toolkit: createSlice e configureStore» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Redux Toolkit: createSlice e configureStore»?

Definire slice dello stato con createSlice, combinarle in configureStore e inviare action dai componenti React usando useDispatch e useSelector. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Redux Toolkit: createSlice e configureStore»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Redux Toolkit: createSlice e configureStore
Zustand per lo stato React leggero
Pinia per Vue: defineStore e storeToRefs
Quando usare lo stato globale o locale

← Torna a Frontend Academy