0PricingLogin▼
React Native Academy · Lesson

Creating Slices with createSlice

Define a slice with createSlice, declare initial state and reducer functions, and export the auto-generated action creators and the reducer.

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;

All lessons in this course

  1. Setting Up the Redux Store and Provider
  2. Creating Slices with createSlice
  3. Reading State with useSelector
  4. Async Thunks with createAsyncThunk
← Back to React Native Academy