Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке Slice у RTK?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення

> **Slice (зріз)** - це **частина стану застосунку** (state) **та логіка**, яка керує цією частиною:
> включає в себе **початковий стан**, **reducers**, **actions** і **назву (name)**.

---

### Простіше кажучи:

> Slice = шматочок Redux-сховища + вся логіка для нього в одному місці.

Раніше тобі доводилося писати:

- `actions.js`
- `reducers.js`
- `actionTypes.js`

Тепер все об'єднано в **один файл slice**.

---

## Приклад простого slice

```javascript
import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',              // ім'я зрізу (буде частиною action type)
  initialState: { value: 0 },   // початковий стан
  reducers: {                   // редюсери (звичайні синхронні дії)
    increment: (state) => {
      state.value += 1          // можна "мутувати" - Immer все виправить
    },
    decrement: (state) => {
      state.value -= 1
    },
    addByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

// Експортуємо actions і reducer
export const { increment, decrement, addByAmount } = counterSlice.actions
export default counterSlice.reducer
```

---

## Що створює `createSlice()` під капотом

1. **Action types**
Автоматично генерує імена екшенів на основі `name` та імені редюсера:

```javascript
  "counter/increment"
  "counter/decrement"
  "counter/addByAmount"
  ```
2. **Action creators**
Генерує готові функції:

```javascript
  increment() → { type: "counter/increment" }
  addByAmount(5) → { type: "counter/addByAmount", payload: 5 }
  ```
3. **Reducer**
Створює редюсер, який обробляє всі ці actions.

---

## Підключення до store

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

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

Тепер у `state` буде:

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

---

## Використання в 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>
  )
}
```

---

## Чому це зручно

| Перевага | Опис |
|---|---|
| Все в одному місці | Reducer, actions та initialState об'єднані |
| Менше бойлерплейта | Не потрібно писати `switch/case` |
| Безпечні мутації | Immer дозволяє писати "мутуючий" код |
| Зручна типізація | TypeScript підтримується з коробки |
| Легка структура | Кожна "фіча" застосунку - свій slice |

---

## Приклад структури проекту зі slices

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

Кожен slice керує своєю частиною стану:
`state.counter`, `state.user`, `state.posts`.

---

## Візуально

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

---

## Підсумок

| Термін | Значення |
|---|---|
| **Slice** | "Зріз" стану + логіка його зміни |
| **Створюється через** | `createSlice({ name, initialState, reducers })` |
| **Містить** | `initialState`, `reducers`, `actions`, `name` |
| **Переваги** | Менше коду, безпечні мутації, все в одному місці |

---

**Коротко:**

> Slice - це **самодостатній модуль Redux Toolkit**,
> який об'єднує стан, логіку та екшени в одному місці.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати496 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.