JS Built-ins
← redux-toolkit1 / 22
redux-toolkitcreateSlicebeginner

Create Slice Basics

📖 Usage Example
const { createSlice } = ReduxToolkit
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment(state) { state.value += 1 },
  },
})
counterSlice.actions.increment() // → { type: 'counter/increment' }

createSlice bundles the reducer and action creators together — no need to write action type constants manually.

createSlice Basics

createSlice is the recommended way to write Redux logic. It generates action creators and action types automatically based on the reducer names you provide.

Challenge: Create a counter slice with:

  • name: 'counter'
  • initialState: { value: 0 }
  • one reducer increment that increases value by 1
counterSlice.name // → 'counter'
counterSlice.actions.increment().type // → 'counter/increment'
💡 Hints (3)
  • • Use `createSlice({ name, initialState, reducers })` to define your slice.
  • • With Immer inside createSlice, you can write `state.value += 1` directly in a reducer.
  • • The action creator is automatically created as `counterSlice.actions.increment`.