0Pricing
TypeScript Academy · Lezione

Tipizzazione di slice e thunk di Redux Toolkit

Utilizzi createSlice e createAsyncThunk con inferenza completa dei tipi.

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

Perché tipizzare Redux Toolkit

Redux Toolkit (RTK) include un eccellente supporto per TypeScript. Una tipizzazione corretta garantisce che action, stato e thunk asincroni siano tutti sicuri dal punto di vista dei tipi, senza asserzioni di tipo manuali.

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

Tipizzare l'interfaccia dello stato

Definisca lo stato della slice come interfaccia TypeScript prima di creare la slice.

interface UserState {
  users: User[];
  loading: boolean;
  error: string | null;
}

const initialState: UserState = {
  users: [],
  loading: false,
  error: null,
};

createSlice con stato tipizzato

Passi il tipo dello stato come parametro generico per garantire che i reducer ricevano uno stato tipizzato correttamente.

const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    setLoading(state, action: PayloadAction<boolean>) {
      state.loading = action.payload; // state: UserState — typed
    },
  },
});

Tipizzazione di PayloadAction

Utilizzi PayloadAction di RTK per tipizzare action.payload nei reducer.

import { PayloadAction } from "@reduxjs/toolkit";

reducers: {
  addUser(state, action: PayloadAction<User>) {
    state.users.push(action.payload); // action.payload: User
  },
}

createAsyncThunk con i tipi

Fornisca i tipi per il valore restituito, l'argomento del thunk e la configurazione della thunk API.

const fetchUsers = createAsyncThunk<User[], void, { rejectValue: string }>(
  "users/fetchAll",
  async (_, { rejectWithValue }) => {
    try {
      return await api.getUsers();
    } catch (e) {
      return rejectWithValue("Failed to fetch");
    }
  }
);

Gestire le action dei thunk in extraReducers

Utilizzi l'API callback di builder per gestire in modo completamente tipizzato le action dei thunk pending/fulfilled/rejected.

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";
      });
  },
});

RootState e AppDispatch tipizzati

Esporti RootState e AppDispatch tipizzati dal file dello store per utilizzarli nei selettori e negli hook.

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;

useSelector e useDispatch tipizzati

Crei versioni tipizzate degli hook Redux per evitare di ripetere le asserzioni di tipo in ogni componente.

import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Tipizzazione di RTK Query

RTK Query genera hook completamente tipizzati dalle definizioni degli endpoint: non è necessario tipizzare manualmente le risposte.

const api = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
  endpoints: (build) => ({
    getUser: build.query<User, string>({
      query: (id) => `/users/${id}`,
    }),
  }),
});
export const { useGetUserQuery } = api;

Tipizzazione dei selettori

Scriva selettori tipizzati utilizzando RootState per garantire un accesso allo stato sicuro dal punto di vista dei tipi.

const selectUsers = (state: RootState): User[] => state.users.users;
const selectLoading = (state: RootState): boolean => state.users.loading;

Riepilogo: RTK tipizzato

TypeScript con Redux Toolkit: definisca un'interfaccia per lo stato, utilizzi PayloadAction nei reducer, tipizzi i generici di createAsyncThunk, esporti RootState e AppDispatch e crei wrapper tipizzati per gli hook.

Verifica rapida

Quale annotazione di tipo rende action.payload sicuro dal punto di vista dei tipi in un reducer RTK?

Cosa ha imparato

TypeScript con Redux Toolkit: definisca le interfacce dello stato delle slice, utilizzi PayloadAction nei reducer, tipizzi createAsyncThunk con tre generici ed esporti RootState/AppDispatch tipizzati con wrapper degli hook da utilizzare nei componenti.

Domande Frequenti

La lezione «Tipizzazione di slice e thunk di Redux Toolkit» è gratuita?

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

Cosa imparerò in «Tipizzazione di slice e thunk di Redux Toolkit»?

Utilizzi createSlice e createAsyncThunk con inferenza completa dei tipi. Eserciti TypeScript 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 TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript 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 «Tipizzazione di slice e thunk di Redux Toolkit»?

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

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

  1. Tipizzazione di slice e thunk di Redux Toolkit
  2. Pattern per la tipizzazione degli store Zustand
  3. XState: macchine a stati tipizzate
  4. Stato derivato e selector con i tipi
← Torna a TypeScript Academy