Suggest an edit

Improve this article

Refine the answer for “What is a Slice in RTK?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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

1. **Action types**
Automatically generates action names based on `name` and the reducer name:

```javascript
  "counter/increment"
  "counter/decrement"
  "counter/addByAmount"
  ```
2. **Action creators**
Generates ready-made functions:

```javascript
  increment() → { type: "counter/increment" }
  addByAmount(5) → { type: "counter/addByAmount", payload: 5 }
  ```
3. **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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts539 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.