Що робить combineReducers()?
Проблема, яку вирішує combineReducers
У реальному застосунку стан (state) зазвичай розділений на частини:
наприклад, user, todos, cart, settings тощо.
Кожна частина керується своїм reducer'ом.
Але createStore() приймає тільки один reducer.
Рішення: combineReducers() об'єднує всі редюсери в один "головний".
Приклад
javascript
import { combineReducers, createStore } from 'redux'
// Reducer для задач
function todosReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload]
default:
return state
}
}
// Reducer для користувача
function userReducer(state = { name: '' }, action) {
switch (action.type) {
case 'SET_USER':
return { ...state, name: action.payload }
default:
return state
}
}
// Об'єднуємо редюсери
const rootReducer = combineReducers({
todos: todosReducer,
user: userReducer,
})
// Створюємо store
const store = createStore(rootReducer)Як це працює всередині
combineReducers() створює один спільний reducer, який:
- викликає кожен під-reducer;
- передає йому тільки відповідну частину стану;
- збирає все назад в єдиний об'єкт state.
Тобто всередині відбувається щось на кшталт:
javascript
function rootReducer(state = {}, action) {
return {
todos: todosReducer(state.todos, action),
user: userReducer(state.user, action)
}
}Візуально
javascript
┌────────────────────────────┐
│ store │
│ { │
│ todos: [...], │
│ user: { name: 'Tim' } │
│ } │
└────────────────────────────┘
▲
│
│ combineReducers
│
┌────────┴─────────┐
│ │
▼ ▼
todosReducer userReducerПереваги
Ділить код на незалежні модулі (кожен reducer відповідає за свій "шматок"). Спрощує тестування і підтримку. Забезпечує структурований стан (state tree).
Як потім звертатися до state
Після combineReducers() стан виглядає ось так:
javascript
store.getState()
// { todos: [...], user: { name: 'Tim' } }Відповідно, щоб дістати ім'я користувача:
javascript
const name = store.getState().user.nameПідсумок
| Функція | Що робить |
|---|---|
combineReducers(reducers) | Об'єднує кілька reducer'ів в один |
| Вхід | Об'єкт вигляду { key: reducer } |
| Вихід | Єдиний "головний" reducer |
| Навіщо потрібно | Щоб розбити логіку по незалежних модулях стану |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.