Redux проти context API

Redux та Context API — це два різні підходи до управління станом у React-додатках. Кожен з них має свої переваги та випадки використання.

Context API

Переваги Context API:

Вбудований у React
Простий у використанні
Підходить для малих додатків
Менше шаблонного коду
Не потребує додаткових залежностей

Недоліки Context API:

Може викликати непотрібні повторні рендери
Складніше організувати великі додатки
Відсутні вбудовані інструменти для налагодження
Обмежена продуктивність при частих оновленнях

Redux

Переваги Redux:

Передбачуване управління станом
Потужні інструменти для розробників
Велика екосистема проміжного програмного забезпечення
Хороша продуктивність при масштабуванні
Зручне тестування

Недоліки Redux:

Більше шаблонного коду
Додаткова залежність
Крутіша крива навчання
Може бути надмірним для малих додатків

Приклад використання Context API

javascript

// Створення контексту
const ThemeContext = React.createContext();

// Провайдер
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// Використання
function ThemedButton() {
  const { theme, setTheme } = useContext(ThemeContext);
  
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Поточна тема: {theme}
    </button>
  );
}

Приклад використання Redux

javascript

// Типи дій
const SET_THEME = 'SET_THEME';

// Творець дій
const setTheme = (theme) => ({
  type: SET_THEME,
  payload: theme
});

// Редюсер
const themeReducer = (state = { theme: 'light' }, action) => {
  switch (action.type) {
    case SET_THEME:
      return { ...state, theme: action.payload };
    default:
      return state;
  }
};

// Компонент
function ThemedButton() {
  const theme = useSelector(state => state.theme);
  const dispatch = useDispatch();
  
  return (
    <button onClick={() => dispatch(setTheme(theme === 'light' ? 'dark' : 'light'))}>
      Поточна тема: {theme}
    </button>
  );
}

Коли використовувати що

Використовуйте Context API, коли:

У вас малий додаток
Оновлення стану рідкісні
Потрібно передавати дані глибоко в дерево компонентів
Не потрібно складної логіки управління станом

Використовуйте Redux, коли:

У вас великий додаток
Потрібна складна логіка управління станом
Потрібна хороша продуктивність при частих оновленнях
Потрібні інструменти для налагодження
Потрібна підтримка проміжного програмного забезпечення

Рекомендація:

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

Зміст

Context API
Redux
Приклад використання Context API
Приклад використання Redux
Коли використовувати що

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

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

Premium

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

Дочитали статтю?

Практика завдань

Redux проти context API

#Context API

#Redux

#Приклад використання Context API

#Приклад використання Redux

#Коли використовувати що

#Зміст