Opprette slices med createSlice
Definer en slice med createSlice, deklarer starttilstand og reducer-funksjoner, og eksporter de automatisk genererte action creator-funksjonene og reduceren.
Opprette slices med createSlice er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva er en Redux-slice?
En slice er en selvstendig del av Redux-logikken for én funksjon i appen. Den samler opprinnelig tilstand, reducer-funksjoner og automatisk genererte action creators i én fil. Navnet kommer av ideen om at hver slice representerer en del av det globale Redux-tilstandstreet.
Importere og kalle createSlice
createSlice importeres fra @reduxjs/toolkit og tar imot et konfigurasjonsobjekt med tre obligatoriske felt: name (et strengprefiks for action-typer), initialState (startverdien for slicens tilstand) og reducers (et objekt med reducer-funksjoner). Den returnerer et objekt som inneholder slice-reduceren og action creator-ene.
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {},
});
export default counterSlice.reducer;Definere reducer-funksjoner
Hver funksjon De legger til i reducers-objektet, blir en case reducer som håndterer en bestemt handling. RTK bruker biblioteket Immer internt, slik at De kan skrive kode som ser ut til å endre tilstanden direkte – Immer gjør den automatisk om til en uforanderlig oppdatering. De trenger aldri å spre eller kopiere tilstandsobjektet manuelt.
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment(state) {
state.value += 1; // Immer makes this safe
},
decrement(state) {
state.value -= 1;
},
incrementByAmount(state, action) {
state.value += action.payload;
},
},
});Automatisk genererte action creators
createSlice genererer automatisk en action creator for hver reducer-funksjon De definerer. Eksporter dem fra slicen og kall dem når De sender handlinger. Navnet på action creator-en samsvarer med reducer-nøkkelen, og den genererte action type-strengen følger mønsteret sliceName/reducerName, for eksempel counter/increment.
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
// Using in a component:
import { useAppDispatch } from '../../store/hooks';
import { increment } from './counterSlice';
const dispatch = useAppDispatch();
dispatch(increment()); // { type: 'counter/increment' }
dispatch(incrementByAmount(5)); // { type: 'counter/incrementByAmount', payload: 5 }Eksportere reduceren
Kallet til createSlice returnerer et objekt med en reducer-egenskap. Eksporter denne som standardeksport, og importer den deretter i store-konfigurasjonen. RTK setter automatisk sammen alle slice-reducerne til én root-reducer når De sender dem til configureStore.
// counterSlice.ts
const counterSlice = createSlice({ /* ... */ });
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
// store/index.ts
import counterReducer from '../features/counter/counterSlice';
export const store = configureStore({
reducer: { counter: counterReducer },
});Definere TypeScript-typer for tilstanden
Når De bruker TypeScript, bør De angi typen for initialState eksplisitt, slik at RTK kan utlede tilstands- og handlingstyper i hele slicen. Definer et grensesnitt for tilstanden, og tilordne det som typeannotasjon til initialState. RTK utleder deretter automatisk riktig type for state-parameteren i hver reducer-funksjon.
interface CounterState {
value: number;
status: 'idle' | 'loading' | 'failed';
}
const initialState: CounterState = {
value: 0,
status: 'idle',
};
const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment(state) {
state.value += 1; // TypeScript knows state is CounterState
},
},
});Bruke PayloadAction for typede payloads
Når en reducer mottar data fra den sendte handlingen, importerer De PayloadAction fra RTK for å angi typen til action-parameteren. PayloadAction<number> forteller TypeScript at action.payload må være et tall. Dette forhindrer utilsiktede uoverensstemmelser mellom det action creator-en godtar, og det reduceren forventer.
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
incrementByAmount(state, action: PayloadAction<number>) {
state.value += action.payload;
},
},
});prepare-callbacken
prepare-callbacken lar Dem tilpasse action creator-en før RTK sender handlingen. De bruker den når De trenger å generere en ID, formatere data eller legge til et tidsstempel i payloaden. Objektet som returneres av prepare, må ha et payload-felt og kan eventuelt ha feltene meta og error.
import { nanoid } from '@reduxjs/toolkit';
const todosSlice = createSlice({
name: 'todos',
initialState: [],
reducers: {
addTodo: {
reducer(state, action: PayloadAction<{ id: string; text: string }>) {
state.push(action.payload);
},
prepare(text: string) {
return { payload: { id: nanoid(), text } };
},
},
},
});Tilbakestille og erstatte tilstand
Noen ganger må De tilbakestille en slice til den opprinnelige tilstanden – for eksempel når en bruker logger ut. De kan returnere en helt ny tilstandsverdi fra en reducer i stedet for å endre den eksisterende. Hvis De returnerer en verdi, bruker Immer den som neste tilstand. Dette er riktig mønster for å tilbakestille eller fullstendig erstatte tilstanden i en slice-reducer.
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0, status: 'idle' },
reducers: {
reset() {
// Return the fresh initial value instead of mutating
return { value: 0, status: 'idle' };
},
},
});Reagere på handlinger fra andre slicer
Slicer kan reagere på handlinger som er definert i andre slicer, ved hjelp av extraReducers. Dette unngår tett kobling – i stedet for å importere én slice i en annen, importerer De bare action creator-en. Bruk mønsteret builder.addCase for å håndtere eksterne action-typer i slicen uten å legge dem til i reducers-nøkkelen.
import { userSlice } from '../user/userSlice';
const cartSlice = createSlice({
name: 'cart',
initialState: { items: [] },
reducers: { /* own actions */ },
extraReducers: (builder) => {
builder.addCase(userSlice.actions.logout, (state) => {
state.items = []; // clear cart when user logs out
});
},
});Fullstendig eksempel på en counter-slice
Her er en komplett counter-slice som er klar til bruk i produksjon, og som kombinerer alt som er gjennomgått så langt: et typet tilstandsgrensesnitt, typede action creators med PayloadAction og en tilbakestillingshandling. Importer denne reduceren i configureStore og handlingene til komponentene for å få en fullt fungerende Redux-funksjon.
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
interface CounterState { value: number; }
const initialState: CounterState = { value: 0 };
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => { state.value += 1; },
decrement: (state) => { state.value -= 1; },
incrementByAmount: (state, action: PayloadAction<number>) => {
state.value += action.payload;
},
reset: () => initialState,
},
});
export const { increment, decrement, incrementByAmount, reset } = counterSlice.actions;
export default counterSlice.reducer;Hurtigsjekk
Test forståelsen Deres av React Native Mobile Development-konseptene fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De at createSlice samler opprinnelig tilstand, reducer-funksjoner og action creators, at Immer lar Dem skrive reducer-kode i en muterende stil som fortsatt er uforanderlig, og at PayloadAction angir typen til action-payloaden for TypeScript-sikkerhet. Deretter skal vi se på hvordan tilstand leses med useSelector.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Opprette slices med createSlice» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Opprette slices med createSlice», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Opprette slices med createSlice»?
Definer en slice med createSlice, deklarer starttilstand og reducer-funksjoner, og eksporter de automatisk genererte action creator-funksjonene og reduceren. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Native Academy?
Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Opprette slices med createSlice»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?
Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Sette opp Redux-store og Provider
- Opprette slices med createSlice
- Lese tilstand med useSelector
- Asynkrone thunks med createAsyncThunk