What is a Slice in RTK?

ReactJunior~1 min read

Definition

A slice is a part of the application's state and the logic that manages that part: it includes the initial state, reducers, actions, and a name.

In simpler terms:

Slice = a piece of the Redux store + all its logic in one place.

Previously you had to write:

actions.js
reducers.js
actionTypes.js

Now everything is combined in one slice file.

Example of a simple slice

javascript

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',              // slice name (will become part of the action type)
  initialState: { value: 0 },   // initial state
  reducers: {                   // reducers (regular synchronous actions)
    increment: (state) => {
      state.value += 1          // you can "mutate" it - Immer fixes it under the hood
    },
    decrement: (state) => {
      state.value -= 1
    },
    addByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

// Export actions and reducer
export const { increment, decrement, addByAmount } = counterSlice.actions
export default counterSlice.reducer

What `createSlice()` creates under the hood

Action types Automatically generates action names based on name and the reducer name:

javascript

"counter/increment"
"counter/decrement"
"counter/addByAmount"

Action creators Generates ready-made functions:

javascript

increment() → { type: "counter/increment" }
addByAmount(5) → { type: "counter/addByAmount", payload: 5 }

Reducer Creates a reducer that handles all these actions.

Connecting it to the store

javascript

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})

Now the state will be:

javascript

store.getState()
// { counter: { value: 0 } }

Usage in React

javascript

import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './counterSlice'

function Counter() {
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <p>Counter: {count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  )
}

Why this is convenient

Advantage	Description
Everything in one place	Reducer, actions, and initialState are combined
Less boilerplate	No need to write `switch/case`
Safe mutations	Immer lets you write "mutating" code
Convenient typing	TypeScript is supported out of the box
Simple structure	Each "feature" of the app gets its own slice

Example project structure with slices

javascript

src/
  store.js
  features/
    counter/
      counterSlice.js
    user/
      userSlice.js
    posts/
      postsSlice.js

Each slice manages its own part of the state: state.counter, state.user, state.posts.

Visually

javascript

Redux Store
│
├── counterSlice  → state.counter  → { value: 0 }
├── userSlice     → state.user     → { name: 'Tim' }
└── postsSlice    → state.posts    → [{ id:1, text:'...' }]

Summary

Term	Meaning
Slice	A "slice" of state + the logic that changes it
Created via	`createSlice({ name, initialState, reducers })`
Contains	`initialState`, `reducers`, `actions`, `name`
Advantages	Less code, safe mutations, everything in one place

In short:

A slice is a self-contained Redux Toolkit module that combines state, logic, and actions in one place.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.