Oprettelse af slices med createSlice
Definér en slice med createSlice, deklarér initial state og reducerfunktioner, og eksportér de automatisk genererede action creators samt reduceren.
Oprettelse af slices med createSlice er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad er en Redux-slice?
En slice er et selvstændigt stykke Redux-logik til én funktion i din app. Den samler den oprindelige tilstand, reducerfunktionerne og de automatisk genererede handlingsoprettere i én enkelt fil. Navnet kommer af idéen om, at hver slice repræsenterer en del af det globale Redux-tilstandstræ.
Import og kald af createSlice
createSlice importeres fra @reduxjs/toolkit og accepterer et konfigurationsobjekt med tre obligatoriske felter: name (et strengpræfiks til handlingstyper), initialState (startværdien for denne slices tilstand) og reducers (et objekt med reducerfunktioner). Den returnerer et objekt, der indeholder slicens reducer og handlingsopretterne.
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {},
});
export default counterSlice.reducer;Definition af reducerfunktioner
Hver funktion, du tilføjer til objektet reducers, bliver en case-reducer, der håndterer en bestemt handling. RTK bruger biblioteket Immer internt, så du kan skrive kode, der ser ud til at ændre tilstanden direkte — Immer konverterer den automatisk til en uforanderlig opdatering. Du behøver aldrig manuelt at sprede eller kopiere tilstandsobjektet.
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 genererede handlingsoprettere
createSlice genererer automatisk en handlingsopretter for hver reducerfunktion, du definerer. Eksportér dem fra slicen, og kald dem, når du sender handlinger. Handlingsopretterens navn svarer til reducerens nøgle, og den genererede handlingstype 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 }Eksport af reduceren
Kaldet til createSlice returnerer et objekt med en reducer-egenskab. Eksportér denne som standardeksporten, og importér den derefter i din store-konfiguration. RTK sammensætter automatisk alle dine slice-reducere til én samlet rodreducer, når du videregiver 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 },
});Definition af TypeScript-typer til tilstanden
Når du bruger TypeScript, skal du skrive en eksplicit type til din initialState, så RTK kan udlede tilstands- og handlingstyper i hele slicen. Definér en grænseflade til din tilstand, og tildel den som typeannotation til initialState. RTK udleder derefter automatisk den korrekte type for state-parameteren i hver reducerfunktion.
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
},
},
});Brug af PayloadAction til typede payloads
Når en reducer modtager data fra den afsendte handling, skal du importere PayloadAction fra RTK for at angive typen for action-parameteren. PayloadAction<number> fortæller TypeScript, at action.payload skal være et tal. Det forhindrer utilsigtede uoverensstemmelser mellem det, handlingsopretteren accepterer, 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;
},
},
});Callbacken prepare
Callbacken prepare lader dig tilpasse handlingsopretteren, før RTK sender handlingen. Du bruger den, når du skal generere et id, formatere data eller føje et tidsstempel til payloaden. Objektet, som prepare returnerer, skal have et payload-felt og kan valgfrit have felterne 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 } };
},
},
},
});Nulstilling og erstatning af tilstanden
Nogle gange skal du nulstille en slice til dens oprindelige tilstand — for eksempel ved brugerens logud. Du kan returnere en helt ny tilstandsværdi fra en reducer i stedet for at ændre den eksisterende. Hvis du returnerer en værdi, bruger Immer den som den næste tilstand. Dette er det korrekte mønster til at nulstille eller fuldstændigt 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' };
},
},
});Reaktion på handlinger fra andre slices
Slices kan reagere på handlinger, der er defineret i andre slices, ved hjælp af extraReducers. Det undgår tæt kobling — i stedet for at importere én slice i en anden importerer du kun handlingsopretteren. Brug mønsteret builder.addCase til at håndtere eksterne handlingstyper i din slice uden at tilføje dem til nøglen reducers.
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
});
},
});Komplet eksempel på en counter-slice
Her er en komplet, produktionsklar counter-slice, der kombinerer alt det, vi har gennemgået indtil nu: en typet tilstandsgrænseflade, typede handlingsoprettere med PayloadAction og en nulstillingshandling. Importér denne reducer i configureStore og dens handlinger i komponenter for at få en fuldt fungerende Redux-funktion.
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;Hurtigt tjek
Test din forståelse af begreberne inden for React Native-mobiludvikling fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du, at createSlice samler den oprindelige tilstand, reducerne og handlingsopretterne, at Immer lader dig skrive reducerkode i en ændrende stil, som stadig er uforanderlig, og at PayloadAction angiver typen for handlingens payload for at give TypeScript-typesikkerhed. Nu skal vi se på læsning af tilstand med useSelector.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Oprettelse af slices med createSlice” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Oprettelse af slices med createSlice”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Oprettelse af slices med createSlice”?
Definér en slice med createSlice, deklarér initial state og reducerfunktioner, og eksportér de automatisk genererede action creators samt reduceren. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Native Academy?
Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Oprettelse af slices med createSlice”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Native Academy-lektion?
Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Opsætning af Redux-store og Provider
- Oprettelse af slices med createSlice
- Læsning af state med useSelector
- Asynkrone thunks med createAsyncThunk