Що таке Slice у RTK?

ReactJunior~1 хв читання

Визначення

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()` під капотом

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

javascript

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

Action creators Генерує готові функції:

javascript

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

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, який об'єднує стан, логіку та екшени в одному місці.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.