Skapa slices med createSlice
Definiera en slice med createSlice, deklarera initialt tillstånd och reducerfunktioner och exportera de automatiskt genererade action creators samt reducern.
Skapa slices med createSlice är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad är en Redux-slice?
En slice är en fristående del av Redux-logiken för en funktion i din app. Den samlar initial state, reducer-funktionerna och de automatiskt genererade action creators i en enda fil. Namnet kommer från tanken att varje slice representerar en del av det globala Redux-state-trädet.
Importera och anropa createSlice
createSlice importeras från @reduxjs/toolkit och tar emot ett konfigurationsobjekt med tre obligatoriska fält: name (ett strängprefix för action-typer), initialState (startvärdet för den här slicens state) och reducers (ett objekt med reducer-funktioner). Den returnerar ett objekt som innehåller slice-reducern och action creators.
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {},
});
export default counterSlice.reducer;Definiera reducer-funktioner
Varje funktion du lägger till i objektet reducers blir en case reducer som hanterar en specifik action. RTK använder biblioteket Immer under huven, så du kan skriva kod som ser ut att ändra state direkt — Immer omvandlar den automatiskt till en oföränderlig uppdatering. Du behöver aldrig sprida ut eller kopiera state-objektet manuellt.
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;
},
},
});Automatiskt genererade action creators
createSlice genererar automatiskt en action creator för varje reducer-funktion du definierar. Exportera dem från slicen och anropa dem när du dispatchar. Action creator-namnet motsvarar reducer-nyckeln, och den genererade action-typsträngen följer mönstret sliceName/reducerName, till exempel 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 }Exportera reducern
Anropet createSlice returnerar ett objekt med en egenskap som heter reducer. Exportera denna som standardexport och importera den sedan i din store-konfiguration. RTK sätter automatiskt ihop alla dina slice-reducers till en enda root reducer när du skickar in dem till 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 },
});Definiera TypeScript-typer för state
När du använder TypeScript bör du ange typen för initialState uttryckligen, så att RTK kan härleda state- och action-typer i hela slicen. Definiera ett interface för ditt state och ange det som typannotering på initialState. RTK härleder då automatiskt rätt typ för parametern state i varje reducer-funktion.
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
},
},
});Använd PayloadAction för typade payloads
När en reducer tar emot data från den dispatchade actionen importerar du PayloadAction från RTK för att ange typen för parametern action. PayloadAction<number> talar om för TypeScript att action.payload måste vara ett tal. Det förhindrar oavsiktliga avvikelser mellan vad action creatorn accepterar och vad reducern förväntar sig.
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 låter dig anpassa action creatorn innan RTK dispatchar actionen. Du använder den när du behöver generera ett ID, formatera data eller lägga till en tidsstämpel i payloaden. Objektet som returneras av prepare måste ha ett fält payload och kan dessutom ha fälten meta och 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 } };
},
},
},
});Återställa och ersätta state
Ibland behöver du återställa en slice till dess initiala state — till exempel när en användare loggar ut. Du kan returnera ett helt nytt state-värde från en reducer i stället för att ändra state. Om du returnerar ett värde använder Immer det som nästa state. Detta är det korrekta mönstret för att återställa eller helt ersätta state 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' };
},
},
});Reagera på actions från andra slices
Slices kan reagera på actions som definierats i andra slices med hjälp av extraReducers. Det undviker en stark koppling — i stället för att importera en slice till en annan importerar du endast action creatorn. Använd mönstret builder.addCase för att hantera externa action-typer i din slice utan att lägga till dem under nyckeln 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
});
},
});Komplett exempel på en counter-slice
Här är en komplett, produktionsklar counter-slice som kombinerar allt vi har gått igenom hittills: ett typat state-interface, typade action creators med PayloadAction och en reset-action. Importera denna reducer till configureStore och dess actions till komponenter för att få en fullt fungerande 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;Snabb kontroll
Testa dina kunskaper om React Native Mobile Development från den här lektionen.
Lektionssammanfattning
I den här lektionen har du lärt dig att createSlice samlar initial state, reducers och action creators, att Immer låter dig skriva reducer-kod i en muterande stil samtidigt som den förblir oföränderlig och att PayloadAction typbestämmer action-payloaden för typsäkerhet i TypeScript. Härnäst utforskar vi hur du läser state med useSelector.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Skapa slices med createSlice” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Skapa slices med createSlice”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Skapa slices med createSlice”?
Definiera en slice med createSlice, deklarera initialt tillstånd och reducerfunktioner och exportera de automatiskt genererade action creators samt reducern. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Skapa slices med createSlice”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Native Academy-lektionen?
Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konfigurera Redux Store och Provider
- Skapa slices med createSlice
- Läsa tillstånd med useSelector
- Asynkrona thunks med createAsyncThunk