React Academy · Lezione

Slice di Redux Toolkit e createSlice

Crei la logica dei reducer con createSlice, definisca le action e colleghi tutto allo store Redux.

Slice di Redux Toolkit e createSlice è una lezione React 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 React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuti

In questa lezione creerà slice Redux Toolkit con createSlice, definirà azioni e reducer in un unico punto e li collegherà a uno store Redux.

Che cos'è Redux Toolkit?

Redux Toolkit (RTK) è l'approccio ufficiale e prescrittivo per scrivere codice Redux. Elimina il boilerplate combinando reducer, creatori di azioni e stato iniziale in un'unica chiamata createSlice().

Installazione

Installi Redux Toolkit e react-redux.

npm install @reduxjs/toolkit react-redux

createSlice

Chiami createSlice() con un name, initialState e un oggetto reducers. RTK genera automaticamente i creatori delle azioni e i tipi delle azioni.

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

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

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

Immer dietro le quinte

RTK utilizza Immer internamente, quindi è possibile scrivere in sicurezza una logica di reducer che modifica lo stato (`state.value += 1`). Immer la converte in un aggiornamento immutabile dietro le quinte.

Configurazione dello store

Crei lo store Redux con configureStore() e aggiunga le slice come reducer.

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

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

Fornire lo store

Avvolga l'app in un Provider di react-redux, passando lo store.

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

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

useSelector e useDispatch

Legga lo stato con useSelector e invii le action con useDispatch. Per TypeScript, utilizzi le versioni tipizzate.

import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const value = useSelector(state => state.counter.value);
  const dispatch = useDispatch();
  return (
    <>
      <p>{value}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(incrementBy(5))}>+5</button>
    </>
  );
}

Tipi TypeScript

Esporti i tipi RootState e AppDispatch da store.ts per ottenere hook completamente tipizzati.

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
// Then use typed hooks:
const value = useSelector((s: RootState) => s.counter.value);

Reducer aggiuntivi

Il campo extraReducers gestisce le action provenienti da altre slice o da createAsyncThunk. Utilizzi il pattern della callback builder per aggiungere i casi.

extraReducers: (builder) => {
  builder.addCase(fetchUser.fulfilled, (state, action) => {
    state.user = action.payload;
  });
}

Verifica rapida

Perché è possibile scrivere codice che modifica lo stato, come `state.value += 1`, all'interno di un reducer di Redux Toolkit?

Riepilogo

createSlice combina name, initialState e reducers in un unico oggetto. Immer consente di scrivere codice per i reducer con una sintassi mutabile. configureStore assembla le slice. useSelector legge lo stato; useDispatch invia le action.

Prossimo argomento

Prossima lezione: **Logica asincrona con createAsyncThunk** — gestirà le chiamate API in Redux utilizzando i tipi di action del ciclo di vita.

Domande Frequenti

La lezione «Slice di Redux Toolkit e createSlice» è gratuita?

Sì — il testo completo di «Slice di Redux Toolkit e createSlice» è 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 React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Slice di Redux Toolkit e createSlice»?

Crei la logica dei reducer con createSlice, definisca le action e colleghi tutto allo store Redux. Eserciti React 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 React Academy?

Non è richiesta alcuna esperienza precedente. React 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 «Slice di Redux Toolkit e createSlice»?

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 React Academy?

Sì. Ogni lezione React 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

Slice di Redux Toolkit e createSlice
Logica asincrona con createAsyncThunk
RTK Query: endpoint e caching automatico
Aggiornamenti ottimistici e invalidazione della cache

← Torna a React Academy