React
createSlice
Learn to write a slice and its reducer.
createSlice details
createSlice auto-generates an action creator for every function you define inside reducers. If the function is addItem, the action type becomes cart/addItem.
Thanks to immer, RTK allows mutations like state.items.push(...); you write normal-looking JS, but the state is still updated immutably.
To dispatch an action you call dispatch(addItem(product)); the payload is added automatically.
Immutability with immer
RTK uses the immer library. So you can write state.items.push(...) inside a reducer; immer turns the mutation into a new state behind the scenes.
This removes the classic Redux spread chaos like { ...state, items: [...state.items, payload] }. The code becomes more readable.
Immer works with proxies; it copies only the changed branches and shares the rest. This keeps performance high.
Exercise Define productSlice
Complete the skeleton. Define productSlice with createSlice. name: 'product', initialState: { list: [] }, inside reducers add addProduct (state, action) => state.list.push(action.payload). Add export const { addProduct } = productSlice.actions; and export default productSlice.reducer;.
Show example solution
import { createSlice } from '@reduxjs/toolkit';
const productSlice = createSlice({
name: 'product',
initialState: { list: [] },
reducers: {
addProduct: (state, action) => {
state.list.push(action.payload);
},
},
});
export const { addProduct } = productSlice.actions;
export default productSlice.reducer;
Test yourself
-
What does createSlice auto-generate?
Each reducer function becomes an action creator.
- The store
- Action creators
- CSS files
- Test files
Show answer
Action creators — createSlice auto-generates action creators.
-
push inside reducer
addItem: (state, action) => { state.items.____(action.payload); }
Show answer
addItem: (state, action) => { state.items.push(action.payload); }
-
createSlice: match the terms
- createSlice
- Creates slice
- immer
- Immutability
- addItem
- Action creator
- dispatch
- Sends action
Next lesson: configureStore
