Creazione di slice con createSlice
Definisca una slice con createSlice, dichiari lo stato iniziale e le funzioni reducer, quindi esporti gli action creator generati automaticamente e il reducer.
Creazione di slice con createSlice è una lezione React Native Academy gratuita su CoddyKit. Questa è la lezione 2 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 React Native Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Native Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
What Is a Redux Slice?
A slice is a self-contained piece of Redux logic for one feature of your app. It bundles the initial state, the reducer functions, and the auto-generated action creators together in a single file. The name comes from the idea that each slice represents a portion (slice) of the global Redux state tree.
Importing and Calling createSlice
createSlice is imported from @reduxjs/toolkit and accepts a configuration object with three required fields: name (a string prefix for action types), initialState (the starting value for this slice's state), and reducers (an object of reducer functions). It returns an object containing the slice reducer and the action creators.
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {},
});
export default counterSlice.reducer;Defining Reducer Functions
Each function you add to the reducers object becomes a case reducer that handles a specific action. RTK uses the Immer library under the hood, so you can write code that appears to mutate state directly — Immer converts it to an immutable update automatically. You never need to spread or copy the state object manually.
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;
},
},
});Auto-Generated Action Creators
createSlice automatically generates an action creator for each reducer function you define. You export them from the slice and call them when dispatching. The action creator name matches the reducer key, and the generated action type string follows the pattern sliceName/reducerName, for example 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 }Exporting the Reducer
The createSlice call returns an object with a reducer property. You export this as the default export and then import it in your store configuration. RTK composes all your slice reducers into the single root reducer automatically when you pass them to 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 },
});Defining TypeScript State Types
When using TypeScript, explicitly type your initialState so RTK can infer state and action types throughout the slice. Define an interface for your state and assign it as the type annotation on initialState. RTK will then infer the correct type for the state parameter in every reducer function automatically.
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
},
},
});Using PayloadAction for Typed Payloads
When a reducer receives data from the dispatched action, import PayloadAction from RTK to type the action parameter. PayloadAction<number> tells TypeScript that action.payload must be a number. This prevents accidental mismatches between what the action creator accepts and what the reducer expects.
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
incrementByAmount(state, action: PayloadAction<number>) {
state.value += action.payload;
},
},
});The prepare Callback
The prepare callback lets you customize the action creator before RTK dispatches the action. You use it when you need to generate an ID, format data, or add a timestamp to the payload. The object returned by prepare must have a payload field, and optionally meta and error fields.
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 } };
},
},
},
});Resetting and Replacing State
Sometimes you need to reset a slice to its initial state — for example on user logout. You can return a completely new state value from a reducer instead of mutating. If you return a value, Immer uses it as the next state. This is the correct pattern for resetting or fully replacing state in a 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' };
},
},
});Responding to Actions from Other Slices
Slices can respond to actions defined in other slices using extraReducers. This avoids tight coupling — instead of importing one slice into another, you import only the action creator. Use the builder.addCase pattern to handle external action types inside your slice without adding them to the reducers key.
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
});
},
});Complete Counter Slice Example
Here is a complete, production-ready counter slice combining everything covered so far: a typed state interface, typed action creators with PayloadAction, and a reset action. Import this reducer into configureStore and its actions into components to have a fully working Redux feature.
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;Quick Check
Test your understanding of React Native Mobile Development concepts from this lesson.
Lesson Recap
In this lesson you learned: createSlice bundles initial state, reducers, and action creators together, Immer lets you write mutating-style reducer code that stays immutable, and PayloadAction types the action payload for TypeScript safety. Next up we explore reading state with useSelector.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Creazione di slice con createSlice» è gratuita?
Sì — il testo completo di «Creazione di slice con createSlice» è 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 React Native Academy, passa a CoddyKit PRO. Il corso React Native Academy include 4 lezioni in totale.
Cosa imparerò in «Creazione di slice con createSlice»?
Definisca una slice con createSlice, dichiari lo stato iniziale e le funzioni reducer, quindi esporti gli action creator generati automaticamente e il reducer. Eserciti React Native 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 React Native Academy?
Non è richiesta alcuna esperienza precedente. React Native 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 2 di 4.
Quanto tempo richiede la lezione «Creazione di slice con createSlice»?
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 React Native Academy?
Sì. Ogni lezione React Native 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
- Configurazione dello store Redux e del Provider
- Creazione di slice con createSlice
- Lettura dello stato con useSelector
- Thunk asincroni con createAsyncThunk