Патерн useReducer у React: освоєння складного управління станом

У світі фронтенд-розробки, що постійно розвивається, React утвердився як провідний фреймворк для створення користувацьких інтерфейсів. Зі зростанням складності додатків управління станом стає все більш складним завданням. Хук useState надає простий спосіб управління станом всередині компонента, але для більш складних сценаріїв React пропонує потужну альтернативу: хук useReducer. Цей блог-пост детально розглядає патерн useReducer, досліджуючи його переваги, практичні реалізації та те, як він може значно покращити ваші React-додатки в глобальному масштабі.

Розуміння потреби у складному управлінні станом

Під час створення React-додатків ми часто стикаємося із ситуаціями, коли стан компонента — це не просто одне значення, а скоріше сукупність взаємопов'язаних даних або стан, що залежить від попередніх значень. Розглянемо такі приклади:

• Аутентифікація користувача: Управління статусом входу, даними користувача та токенами автентифікації.
• Обробка форм: Відстеження значень кількох полів вводу, помилок валідації та статусу відправки.
• Кошик в інтернет-магазині: Управління товарами, їх кількістю, цінами та інформацією про замовлення.
• Чати в реальному часі: Обробка повідомлень, присутності користувачів та статусу з'єднання.

У цих сценаріях використання лише useState може призвести до складного коду, яким важко керувати. Оновлення кількох змінних стану у відповідь на одну подію може стати громіздким, а логіка управління цими оновленнями може бути розкидана по всьому компоненту, що ускладнює її розуміння та підтримку. Саме тут useReducer проявляє себе найкраще.

Знайомство з хуком useReducer

Хук useReducer є альтернативою useState для управління складною логікою стану. Він базується на принципах патерну Redux, але реалізований всередині самого компонента React, що у багатьох випадках усуває потребу в окремій зовнішній бібліотеці. Він дозволяє централізувати логіку оновлення стану в одній функції, що називається редюсером.

Хук useReducer приймає два аргументи:

• Функція-редюсер: Це чиста функція, яка приймає поточний стан та дію як вхідні дані й повертає новий стан.
• Початковий стан: Це початкове значення стану.

Хук повертає масив, що містить два елементи:

• Поточний стан: Це поточне значення стану.
• Функція dispatch: Ця функція використовується для запуску оновлень стану шляхом відправки дій до редюсера.

Функція-редюсер

Функція-редюсер — це серце патерну useReducer. Це чиста функція, що означає, що вона не повинна мати побічних ефектів (наприклад, робити API-запити або змінювати глобальні змінні) і завжди повинна повертати однаковий результат для однакових вхідних даних. Функція-редюсер приймає два аргументи:

• state: Поточний стан.
• action: Об'єкт, що описує, що має відбутися зі станом. Дії зазвичай мають властивість type, яка вказує на тип дії, та властивість payload, що містить дані, пов'язані з дією.

Всередині функції-редюсера ви використовуєте оператор switch або конструкції if/else if для обробки різних типів дій та відповідного оновлення стану. Це централізує логіку оновлення стану та полегшує розуміння того, як стан змінюється у відповідь на різні події.

Функція dispatch

Функція dispatch — це метод, який ви використовуєте для запуску оновлень стану. Коли ви викликаєте dispatch(action), дія передається до функції-редюсера, яка потім оновлює стан на основі типу та даних (payload) дії.

Практичний приклад: реалізація лічильника

Почнемо з простого прикладу: компонента-лічильника. Це проілюструє основні концепції перед тим, як перейти до складніших прикладів. Ми створимо лічильник, який може збільшувати, зменшувати та скидати значення:

import React, { useReducer } from 'react';

// Визначаємо типи дій
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RESET = 'RESET';

// Визначаємо функцію-редюсер
function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    case RESET:
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  // Ініціалізуємо useReducer
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button>
      <button onClick={() => dispatch({ type: DECREMENT })}>Decrement</button>
      <button onClick={() => dispatch({ type: RESET })}>Reset</button>
    </div>
  );
}

export default Counter;

У цьому прикладі:

• Ми визначаємо типи дій як константи для кращої підтримки (INCREMENT, DECREMENT, RESET).
• Функція counterReducer приймає поточний стан і дію. Вона використовує оператор switch, щоб визначити, як оновити стан на основі типу дії.
• Початковий стан — { count: 0 }.
• Функція dispatch використовується в обробниках кліків на кнопках для запуску оновлень стану. Наприклад, dispatch({ type: INCREMENT }) надсилає дію типу INCREMENT до редюсера.

Розширення прикладу з лічильником: додавання payload

Давайте змінимо лічильник, щоб дозволити збільшення на певне значення. Це вводить концепцію payload (корисного навантаження) в дію:

import React, { useReducer } from 'react';

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RESET = 'RESET';
const SET_VALUE = 'SET_VALUE';

function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + action.payload };
    case DECREMENT:
      return { count: state.count - action.payload };
    case RESET:
      return { count: 0 };
    case SET_VALUE:
      return { count: action.payload };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
  const [inputValue, setInputValue] = React.useState(1);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT, payload: parseInt(inputValue) || 1 })}>Increment by {inputValue}</button>
      <button onClick={() => dispatch({ type: DECREMENT, payload: parseInt(inputValue) || 1 })}>Decrement by {inputValue}</button>
      <button onClick={() => dispatch({ type: RESET })}>Reset</button>
       <input
         type="number"
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
       />
      </div>
  );
}

export default Counter;

У цьому розширеному прикладі:

• Ми додали тип дії SET_VALUE.
• Дії INCREMENT та DECREMENT тепер приймають payload, який представляє величину, на яку потрібно збільшити або зменшити значення. parseInt(inputValue) || 1 гарантує, що значення є цілим числом і за замовчуванням дорівнює 1, якщо введення недійсне.
• Ми додали поле вводу, що дозволяє користувачам встановлювати значення для збільшення/зменшення.

Переваги використання useReducer

Патерн useReducer пропонує кілька переваг над прямим використанням useState для складного управління станом:

• Централізована логіка стану: Усі оновлення стану обробляються в межах функції-редюсера, що полегшує розуміння та налагодження змін стану.
• Покращена організація коду: Відокремлюючи логіку оновлення стану від логіки рендерингу компонента, ваш код стає більш організованим та читабельним, що сприяє кращій підтримці коду.
• Передбачувані оновлення стану: Оскільки редюсери є чистими функціями, ви можете легко передбачити, як зміниться стан для конкретної дії та початкового стану. Це значно полегшує налагодження та тестування.
• Оптимізація продуктивності: useReducer може допомогти оптимізувати продуктивність, особливо коли оновлення стану є обчислювально складними. React може ефективніше оптимізувати повторні рендеринги, коли логіка оновлення стану міститься в редюсері.
• Тестованість: Редюсери — це чисті функції, що робить їх легкими для тестування. Ви можете писати юніт-тести, щоб переконатися, що ваш редюсер правильно обробляє різні дії та початкові стани.
• Альтернативи Redux: Для багатьох додатків useReducer є спрощеною альтернативою Redux, що усуває потребу в окремій бібліотеці та накладних витратах на її налаштування та управління. Це може оптимізувати ваш робочий процес розробки, особливо для малих та середніх проектів.

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

Хоча useReducer пропонує значні переваги, він не завжди є найкращим вибором. Розгляньте можливість використання useReducer, коли:

• У вас складна логіка стану, що включає кілька змінних стану.
• Оновлення стану залежать від попереднього стану (наприклад, обчислення накопичувального підсумку).
• Вам потрібно централізувати та організувати логіку оновлення стану для кращої підтримки.
• Ви хочете покращити тестованість та передбачуваність оновлень стану.
• Ви шукаєте патерн, схожий на Redux, без впровадження окремої бібліотеки.

Для простих оновлень стану useState часто є достатнім і простішим у використанні. Приймаючи рішення, враховуйте складність вашого стану та потенціал для його зростання.

Просунуті концепції та техніки

Поєднання useReducer з Context

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

import React, { createContext, useReducer, useContext } from 'react';

// Визначаємо типи дій та редюсер (як раніше)
const INCREMENT = 'INCREMENT';
// ... (інші типи дій та функція counterReducer)

const CounterContext = createContext();

function CounterProvider({ children }) {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
}

function useCounter() {
  return useContext(CounterContext);
}

function Counter() {
  const { state, dispatch } = useCounter();

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
}

export default App;

У цьому прикладі:

• Ми створюємо CounterContext за допомогою createContext.
• CounterProvider обгортає додаток (або ті його частини, яким потрібен доступ до стану лічильника) і надає state та dispatch з useReducer.
• Хук useCounter спрощує доступ до контексту в дочірніх компонентах.
• Компоненти, такі як Counter, тепер можуть отримувати доступ до стану лічильника та змінювати його глобально. Це усуває необхідність передавати стан і функцію dispatch через кілька рівнів компонентів, спрощуючи управління пропсами.

Тестування useReducer

Тестування редюсерів є простим, оскільки вони є чистими функціями. Ви можете легко протестувати функцію-редюсер в ізоляції, використовуючи фреймворк для юніт-тестування, такий як Jest або Mocha. Ось приклад з використанням Jest:

import { counterReducer } from './counterReducer'; // Припускаючи, що counterReducer знаходиться в окремому файлі

const INCREMENT = 'INCREMENT';

describe('counterReducer', () => {
  it('should increment the count', () => {
    const state = { count: 0 };
    const action = { type: INCREMENT };
    const newState = counterReducer(state, action);
    expect(newState.count).toBe(1);
  });

   it('should return the same state for unknown action types', () => {
        const state = { count: 10 };
        const action = { type: 'UNKNOWN_ACTION' };
        const newState = counterReducer(state, action);
        expect(newState).toBe(state); // Переконуємося, що стан не змінився
    });
});

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

Оптимізація продуктивності за допомогою мемоізації

При роботі зі складними станами та частими оновленнями, розгляньте можливість використання useMemo для оптимізації продуктивності ваших компонентів, особливо якщо у вас є похідні значення, що обчислюються на основі стану. Наприклад:

import React, { useReducer, useMemo } from 'react';

function reducer(state, action) {
  // ... (логіка редюсера) 
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // Обчислюємо похідне значення, мемоізуючи його за допомогою useMemo
  const derivedValue = useMemo(() => {
    // Складне обчислення на основі стану
    return state.value1 + state.value2;
  }, [state.value1, state.value2]); // Залежності:  перераховувати тільки при зміні цих значень

  return (
    <div>
      <p>Derived Value: {derivedValue}</p>
      <button onClick={() => dispatch({ type: 'UPDATE_VALUE1', payload: 10 })}>Update Value 1</button>
      <button onClick={() => dispatch({ type: 'UPDATE_VALUE2', payload: 20 })}>Update Value 2</button>
    </div>
  );
}

У цьому прикладі derivedValue обчислюється тільки тоді, коли змінюються state.value1 або state.value2, що запобігає зайвим обчисленням при кожному повторному рендерингу. Цей підхід є поширеною практикою для забезпечення оптимальної продуктивності рендерингу.

Реальні приклади та випадки використання

Давайте розглянемо кілька практичних прикладів того, де useReducer є цінним інструментом при створенні React-додатків для глобальної аудиторії. Нотатка: ці приклади спрощені для ілюстрації основних концепцій. Фактичні реалізації можуть включати складнішу логіку та залежності.

1. Фільтри товарів в інтернет-магазині

Уявіть собі веб-сайт електронної комерції (наприклад, популярні платформи, як Amazon або AliExpress, доступні в усьому світі) з великим каталогом товарів. Користувачам потрібно фільтрувати товари за різними критеріями (діапазон цін, бренд, розмір, колір, країна походження тощо). useReducer ідеально підходить для управління станом фільтрів.

import React, { useReducer } from 'react';

const initialState = {
  priceRange: { min: 0, max: 1000 },
  brand: [], // Масив вибраних брендів
  color: [], // Масив вибраних кольорів
  //... інші критерії фільтрації
};

function filterReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_PRICE_RANGE':
      return { ...state, priceRange: action.payload };
    case 'TOGGLE_BRAND':
      const brand = action.payload;
      return { ...state, brand: state.brand.includes(brand) ? state.brand.filter(b => b !== brand) : [...state.brand, brand] };
    case 'TOGGLE_COLOR':
      // Аналогічна логіка для фільтрації за кольором
      return { ...state, color: state.color.includes(action.payload) ? state.color.filter(c => c !== action.payload) : [...state.color, action.payload] };
    // ... інші дії для фільтрів
    default:
      return state;
  }
}

function ProductFilter() {
  const [state, dispatch] = useReducer(filterReducer, initialState);

  // UI-компоненти для вибору критеріїв фільтрації та виклику дій dispatch
  // Наприклад: повзунок для ціни, чекбокси для брендів тощо.

  return (
    <div>
      <!-- Елементи UI для фільтрів -->
    </div>
  );
}

Цей приклад показує, як контрольовано обробляти кілька критеріїв фільтрації. Коли користувач змінює будь-яке налаштування фільтра (ціну, бренд тощо), редюсер відповідно оновлює стан фільтра. Компонент, відповідальний за відображення товарів, потім використовує оновлений стан для фільтрації показаних товарів. Цей патерн підтримує створення складних систем фільтрації, поширених на глобальних платформах електронної комерції.

2. Багатокрокові форми (напр., форми міжнародної доставки)

Багато додатків включають багатокрокові форми, наприклад, ті, що використовуються для міжнародної доставки або створення облікових записів користувачів зі складними вимогами. useReducer чудово справляється з управлінням станом таких форм.

import React, { useReducer } from 'react';

const initialState = {
  step: 1, // Поточний крок форми
  formData: {
    firstName: '',
    lastName: '',
    address: '',
    city: '',
    country: '',
    // ... інші поля форми
  },
  errors: {},
};

function formReducer(state, action) {
  switch (action.type) {
    case 'NEXT_STEP':
      return { ...state, step: state.step + 1 };
    case 'PREV_STEP':
      return { ...state, step: state.step - 1 };
    case 'UPDATE_FIELD':
      return { ...state, formData: { ...state.formData, [action.payload.field]: action.payload.value } };
    case 'SET_ERRORS':
      return { ...state, errors: action.payload };
    case 'SUBMIT_FORM':
      // Тут обробляється логіка відправки форми, напр., API-запити
      return state;
    default:
      return state;
  }
}

function MultiStepForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  // Логіка рендерингу для кожного кроку форми
  // На основі поточного кроку в стані
  const renderStep = () => {
    switch (state.step) {
      case 1:
        return <Step1 formData={state.formData} dispatch={dispatch} />;
      case 2:
        return <Step2 formData={state.formData} dispatch={dispatch} />;
      // ... інші кроки
      default:
        return <p>Invalid Step</p>;
    }
  };

  return (
    <div>
      {renderStep()}
      <!-- Кнопки навігації (Далі, Назад, Відправити) залежно від поточного кроку -->
    </div>
  );
}

Це ілюструє, як керувати різними полями форми, кроками та потенційними помилками валідації структурованим та підтримуваним способом. Це критично важливо для створення зручних процесів реєстрації або оформлення замовлення, особливо для міжнародних користувачів, які можуть мати різні очікування на основі місцевих звичаїв та досвіду роботи з різними платформами, такими як Facebook або WeChat.

3. Додатки реального часу (чати, інструменти для співпраці)

useReducer корисний для додатків реального часу, таких як інструменти для спільної роботи на кшталт Google Docs або месенджерів. Він обробляє події, такі як отримання повідомлень, приєднання/вихід користувачів та статус з'єднання, забезпечуючи необхідне оновлення UI.

import React, { useReducer, useEffect } from 'react';

const initialState = {
  messages: [],
  users: [],
  connectionStatus: 'connecting',
};

function chatReducer(state, action) {
  switch (action.type) {
    case 'RECEIVE_MESSAGE':
      return { ...state, messages: [...state.messages, action.payload] };
    case 'USER_JOINED':
      return { ...state, users: [...state.users, action.payload] };
    case 'USER_LEFT':
      return { ...state, users: state.users.filter(user => user.id !== action.payload.id) };
    case 'SET_CONNECTION_STATUS':
      return { ...state, connectionStatus: action.payload };
    default:
      return state;
  }
}

function ChatRoom() {
  const [state, dispatch] = useReducer(chatReducer, initialState);

  useEffect(() => {
    // Встановлюємо WebSocket-з'єднання (приклад):
    const socket = new WebSocket('wss://your-websocket-server.com');

    socket.onopen = () => dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'connected' });
    socket.onmessage = (event) => dispatch({ type: 'RECEIVE_MESSAGE', payload: JSON.parse(event.data) });
    socket.onclose = () => dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'disconnected' });

    return () => socket.close(); // Очищення при розмонтуванні
  }, []);

  // Рендеримо повідомлення, список користувачів та статус з'єднання на основі стану
  return (
    <div>
      <p>Connection Status: {state.connectionStatus}</p>
      <!-- UI для відображення повідомлень, списку користувачів та надсилання повідомлень -->
    </div>
  );
}

Цей приклад надає основу для управління чатом в реальному часі. Стан обробляє зберігання повідомлень, користувачів, які зараз у чаті, та статус з'єднання. Хук useEffect відповідає за встановлення WebSocket-з'єднання та обробку вхідних повідомлень. Цей підхід створює чутливий та динамічний користувацький інтерфейс, що задовольняє потреби користувачів у всьому світі.

Найкращі практики використання useReducer

Щоб ефективно використовувати useReducer та створювати підтримувані додатки, дотримуйтесь цих найкращих практик:

• Визначайте типи дій: Використовуйте константи для типів дій (напр., const INCREMENT = 'INCREMENT';). Це допомагає уникнути помилок і покращує читабельність коду.
• Зберігайте редюсери чистими: Редюсери повинні бути чистими функціями. Вони не повинні мати побічних ефектів, таких як зміна глобальних змінних або виконання API-запитів. Редюсер повинен лише обчислювати та повертати новий стан на основі поточного стану та дії.
• Імутабельні оновлення стану: Завжди оновлюйте стан імутабельно. Не змінюйте об'єкт стану безпосередньо. Замість цього створюйте новий об'єкт з бажаними змінами, використовуючи синтаксис розповсюдження (...) або Object.assign(). Це запобігає несподіваній поведінці та полегшує налагодження.
• Структуруйте дії з payload: Використовуйте властивість payload у ваших діях для передачі даних до редюсера. Це робить ваші дії більш гнучкими та дозволяє обробляти ширший спектр оновлень стану.
• Використовуйте Context API для глобального стану: Якщо ваш стан потрібно розділити між кількома компонентами, поєднуйте useReducer з Context API. Це забезпечує чистий та ефективний спосіб управління глобальним станом без впровадження зовнішніх залежностей, таких як Redux.
• Розбивайте редюсери для складної логіки: Для складної логіки стану розгляньте можливість розбиття вашого редюсера на менші, більш керовані функції. Це покращує читабельність та підтримку. Ви також можете групувати пов'язані дії в межах певного розділу функції-редюсера.
• Тестуйте ваші редюсери: Пишіть юніт-тести для ваших редюсерів, щоб переконатися, що вони правильно обробляють різні дії та початкові стани. Це вкрай важливо для забезпечення якості коду та запобігання регресіям. Тести повинні охоплювати всі можливі сценарії змін стану.
• Розглядайте оптимізацію продуктивності: Якщо ваші оновлення стану є обчислювально складними або викликають часті повторні рендеринги, використовуйте техніки мемоізації, такі як useMemo, для оптимізації продуктивності ваших компонентів.
• Документація: Надавайте чітку документацію про стан, дії та призначення вашого редюсера. Це допомагає іншим розробникам розуміти та підтримувати ваш код.

Висновок

Хук useReducer — це потужний та універсальний інструмент для управління складним станом у React-додатках. Він пропонує численні переваги, включаючи централізовану логіку стану, покращену організацію коду та підвищену тестованість. Дотримуючись найкращих практик та розуміючи його основні концепції, ви можете використовувати useReducer для створення більш надійних, підтримуваних та продуктивних React-додатків. Цей патерн дає вам змогу ефективно вирішувати складні завдання з управління станом, дозволяючи створювати готові до глобального ринку додатки, які забезпечують бездоганний користувацький досвід у всьому світі.

По мірі того, як ви глибше занурюєтеся в розробку на React, включення патерну useReducer до вашого набору інструментів, безсумнівно, призведе до чистіших, більш масштабованих та легко підтримуваних кодових баз. Пам'ятайте, що завжди слід враховувати конкретні потреби вашого додатка та вибирати найкращий підхід до управління станом для кожної ситуації. Вдалого кодування!