TypeScript Academy · Oppitunti

Redux Toolkit -slicejen ja thunkien tyypittäminen

Käyttäkää createSlice- ja createAsyncThunk-funktioita täydellä tyyppipäättelyllä

Oppitunti 1/413 vaihetta

Redux Toolkit -slicejen ja thunkien tyypittäminen on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Miksi Redux Toolkit kannattaa tyypittää

Redux Toolkit (RTK) sisältää erinomaisen TypeScript-tuen. Oikeaoppinen tyypitys varmistaa, että toiminnot, tila ja asynkroniset thunkit ovat kaikki tyyppiturvallisia ilman manuaalisia tyyppiväitteitä.

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

Tilajarajapinnan tyypittäminen

Määritelkää slicen tila TypeScript-rajapintana ennen slicen luomista.

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

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

createSlice tyypitetyn tilan kanssa

Välittäkää tilan tyyppi geneerisenä tyyppiparametrina, jotta reducerit saavat oikein tyypitetyn tilan.

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

PayloadActionin tyypitys

Käyttäkää RTK:n PayloadAction-tyyppiä tyypittämään reducerien action.payload.

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

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

createAsyncThunk tyyppien kanssa

Antakaa tyypit palautusarvolle, thunkin argumentille ja thunk API:n asetuksille.

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

Thunk-toimintojen käsittely extraReducersissa

Käyttäkää builder-callback-rajapintaa pending-, fulfilled- ja rejected-thunk-toimintojen täysin tyypitettyyn käsittelyyn.

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

Tyypitetyt RootState ja AppDispatch

Viekää tyypitetyt RootState- ja AppDispatch-tyypit store-tiedostosta, jotta niitä voidaan käyttää selektoreissa ja hookeissa.

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;

Tyypitetyt useSelector ja useDispatch

Luokaa Redux-hookeista tyypitetyt versiot, jotta tyyppiväitteitä ei tarvitse toistaa jokaisessa komponentissa.

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

RTK Queryn tyypitys

RTK Query luo endpoint-määrittelyistänne täysin tyypitetyt hookit — vastauksia ei tarvitse tyypittää manuaalisesti.

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

Selektorien tyypitys

Kirjoittakaa tyypitetyt selektorit käyttäen RootState-tyyppiä varmistaaksenne tyyppiturvallisen pääsyn tilaan.

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

Kertaus: tyypitetty RTK

Redux Toolkit TypeScriptissä: määritelkää tilarajapinta, käyttäkää reducerien sisällä PayloadAction-tyyppiä, tyypittäkää createAsyncThunk-geneeriset tyypit, viekää RootState ja AppDispatch sekä luokaa tyypitetyt hook-kääreet.

Pikatarkistus

Mikä tyyppimerkintä tekee RTK-reducerin action.payload-arvosta tyyppiturvallisen?

Vastaa interaktiivisessa oppitunnissa

Mitä opitte

Redux Toolkit TypeScriptissä: määritelkää slicen tilan rajapinnat, käyttäkää reducerien sisällä PayloadAction-tyyppiä, tyypittäkää createAsyncThunk kolmella geneerisellä tyypillä ja viekää tyypitetyt RootState/AppDispatch-tyypit sekä komponenteissa käytettävät hook-kääreet.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Redux Toolkit -slicejen ja thunkien tyypittäminen” ilmainen?

Kyllä – oppitunnin ”Redux Toolkit -slicejen ja thunkien tyypittäminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Redux Toolkit -slicejen ja thunkien tyypittäminen”?

Käyttäkää createSlice- ja createAsyncThunk-funktioita täydellä tyyppipäättelyllä Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Redux Toolkit -slicejen ja thunkien tyypittäminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Redux Toolkit -slicejen ja thunkien tyypittäminen
Zustand-storen tyypitysmallit
XState: tyypitetyt tilakoneet
Johdettu tila ja selectorit tyyppien kanssa

← Takaisin: TypeScript Academy