Основні концепції Redux

Redux — це потужна бібліотека для керування станом у React-додатках. Її головна перевага полягає в тому, що вона надає централізоване сховище для стану вашого додатка, що дозволяє легко підтримувати та масштабувати ваш код.

1. Store
Централізоване сховище, яке зберігає весь стан додатка. У Redux має бути лише один Store.

2. Actions
Це об’єкти, які описують те, що має статися. У них є обов’язкове поле type, що вказує на тип дії, і, можливо, додаткові дані (payload).

const incrementAction = { type: 'INCREMENT' };

1	const incrementAction = { type: 'INCREMENT' };

3. Reducers
Це функції, які визначають, як змінюється стан додатка у відповідь на дії (actions). Вони приймають поточний стан і дію як аргументи та повертають новий стан.

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

const counterReducer = (state = 0, action) => {

switch (action.type) {

case 'INCREMENT':

return state + 1;

case 'DECREMENT':

return state - 1;

default:

return state;

}

};

4. Dispatch
Це спосіб “викликати” дії. Ви викликаєте store.dispatch(action), щоб повідомити Redux, що щось змінилося.

store.dispatch({ type: 'INCREMENT' });

1	store.dispatch({ type: 'INCREMENT' });

5. Selectors
Це функції для вибору певної частини стану зі Store. Вони роблять код більш читабельним.

Як працює Redux

Користувач ініціює подію (наприклад, клікає на кнопку).
dispatch відправляє action до Store.
Reducer обробляє action і повертає новий стан.
Стан у Store оновлюється.
React-компоненти, підключені до Store, отримують новий стан і перерендерюються.

Переваги Redux

Прогнозованість: Один джерело істини (Store) дозволяє легко відстежувати стан.
Інструменти розробника: Redux DevTools значно спрощує налагодження додатка.
Масштабованість: Redux підходить для великих додатків, де важливо мати чітку організацію стану.

Приклад: Redux у React

1. Встановлення Redux:

npm install redux react-redux

1	npm install redux react-redux

2. Налаштування Store:

import { createStore } from 'redux';

// Reducer
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

// Store
const store = createStore(counterReducer);

export default store;

import { createStore } from 'redux';

// Reducer

const counterReducer = (state = 0, action) => {

switch (action.type) {

case 'INCREMENT':

return state + 1;

case 'DECREMENT':

return state - 1;

default:

return state;

}

};

// Store

const store = createStore(counterReducer);

export default store;

3. Підключення до React через Provider:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import store from './store';

import App from './App';

ReactDOM.render(

<App />

</Provider>,

document.getElementById('root')

);

4. Використання стану у компоненті:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state); // Доступ до стану
  const dispatch = useDispatch(); // Відправка дій

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

export default Counter;

import React from 'react';

import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {

const count = useSelector((state) => state); // Доступ до стану

const dispatch = useDispatch(); // Відправка дій

return (

<div>

<h1>Count: {count}</h1>

<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>

<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>

</div>

);

};

export default Counter;

Чи завжди потрібен Redux?

Redux добре підходить для великих додатків, де багато компонентів мають спільний стан. Для менших проєктів або ситуацій, коли стан є локальним, краще використовувати Context API або локальний стан компонента.

На відміну від Redux, Context API підходить для керування локальним станом, який не потребує складної логіки або централізації. Він ідеальний для передачі даних між компонентами на невеликій глибині, як-от тема, мова інтерфейсу чи авторизація. Однак для масштабних додатків із складними потоками даних краще використовувати Redux, щоб забезпечити передбачуваність і зручність у налагодженні.

Context API — це вбудований механізм у React для передачі даних (стану або функцій) між компонентами без необхідності прокинути (prop drilling) ці дані через всі проміжні компоненти. Це зручний спосіб спрощення передачі “глобальних” даних, наприклад, теми, мови інтерфейсу чи авторизації.

Як працює Context API

Створення контексту: Використовується функція React.createContext(), яка створює об’єкт контексту.
Надання даних (Provider): Компонент <Provider> передає дані всім дочірнім компонентам.
Споживання даних (Consumer): Дочірні компоненти отримують дані з контексту за допомогою useContext() або компонента-споживача <Consumer>.

Простий приклад:

1. Створення контексту:

import React, { createContext } from 'react';

export const ThemeContext = createContext('light'); // 'light' — значення за замовчуванням

import React, { createContext } from 'react';

export const ThemeContext = createContext('light'); // 'light' — значення за замовчуванням

2. Надання даних через Provider:

import React from 'react';
import { ThemeContext } from './ThemeContext';

const App = () => {
  return (
    <ThemeContext.Provider value="dark"> {/* Передаємо тему */}
      <ChildComponent />
    </ThemeContext.Provider>
  );
};

export default App;

import React from 'react';

import { ThemeContext } from './ThemeContext';

const App = () => {

return (

<ThemeContext.Provider value="dark"> {/* Передаємо тему */}

</ThemeContext.Provider>

);

};

export default App;

3. Споживання даних:

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const ChildComponent = () => {
  const theme = useContext(ThemeContext); // Отримуємо тему
  return <div>Current theme: {theme}</div>;
};

export default ChildComponent;

import React, { useContext } from 'react';

import { ThemeContext } from './ThemeContext';

const ChildComponent = () => {

const theme = useContext(ThemeContext); // Отримуємо тему

return <div>Current theme: {theme}</div>;

};

export default ChildComponent;

Переваги Context API:

Зменшує необхідність пробкинути дані через пропси.
Легкість у використанні для невеликих глобальних станів (тема, мова).
Вбудована у React, не потребує додаткових бібліотек.

Обмеження Context API:

Менш ефективний для частих оновлень стану, оскільки кожен дочірній компонент передплатник перерендерюється.
Налаштування логіки може стати громіздким у великих проєктах.

Для невеликих додатків або локального глобального стану Context API — чудовий вибір, але для складних застосунків із багатьма потоками даних краще розглянути Redux.