Skip to main content

Що робить store у Redux?

ReactJunior~1 хв читання
Запропонувати правку

Що таке store у Redux

Store - це об'єкт, який:

  1. зберігає весь стан застосунку,
  2. дозволяє отримувати поточний стан,
  3. дозволяє оновлювати його через dispatch(action),
  4. сповіщає підписників (subscribe) про зміни.

Можна думати про store як про єдине джерело правди (single source of truth) - весь стан застосунку зберігається саме там.

Як створити store

javascript
import { createStore } from "redux"; import { counterReducer } from "./counterReducer"; const store = createStore(counterReducer);

createStore() приймає reducer - функцію, яка керує тим, як оновлюється стан при різних діях.

Що робить store

МетодПризначення
getState()Повертає поточний стан
dispatch(action)Відправляє дію (action) до reducer для зміни стану
subscribe(listener)Підписує компонент або функцію на зміни
replaceReducer(nextReducer)Змінює reducer "на льоту" (рідко використовується)

Приклад роботи

javascript
// 1. Reducer function counterReducer(state = { count: 0 }, action) { switch (action.type) { case "INCREMENT": return { count: state.count + 1 }; case "DECREMENT": return { count: state.count - 1 }; default: return state; } } // 2. Створюємо store import { createStore } from "redux"; const store = createStore(counterReducer); // 3. Підписуємось на оновлення store.subscribe(() => { console.log("State змінився:", store.getState()); }); // 4. Відправляємо дії store.dispatch({ type: "INCREMENT" }); store.dispatch({ type: "INCREMENT" }); store.dispatch({ type: "DECREMENT" });

Що відбувається:

  1. dispatch відправляє action;
  2. Store викликає reducer(state, action);
  3. Reducer повертає новий state;
  4. Store зберігає його і сповіщає всіх підписників;
  5. Компоненти отримують новий стан і перерендерюються.

Store у React-застосунку

Зазвичай використовується разом з react-redux:

javascript
import { Provider, useSelector, useDispatch } from "react-redux"; import { store } from "./store"; function Counter() { const count = useSelector(state => state.count); const dispatch = useDispatch(); return ( <> <p>{count}</p> <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button> </> ); } function App() { return ( <Provider store={store}> <Counter /> </Provider> ); }

Тут Provider робить store доступним усім компонентам, а хуки useSelector і useDispatch дозволяють працювати з ним.

Підсумок

Що робить storeКоротко
Зберігає stateВесь стан застосунку в одному місці
Керує змінамиОновлює стан через reducer
Оповіщає слухачівСповіщає про кожну зміну
Інтегрується з ReactЧерез <Provider> і хуки useSelector / useDispatch

Коротко:

store - це "єдиний мозок" Redux-застосунку: він знає весь стан, слухає дії, викликає редюсери і оновлює інтерфейс.

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

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

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

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