useReducer

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

Запис функції редуктора

Функція-редуктор оголошується так:

function reducer(state, action) {
  // ...
}

Далі потрібно заповнити код, який буде обчислювати і повертати наступний стан. За домовленістю його прийнято записувати як інструкцію switch. Для кожного case у switch обчислити і повернути деякий наступний стан.

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      return {
        name: state.name,
        age: state.age + 1
      };
    }
    case 'changed_name': {
      return {
        name: action.nextName,
        age: state.age
      };
    }
  }
  throw Error('Unknown action: ' + action.type);
}

Дії можуть мати будь-яку форму. Зазвичай прийнято передавати об'єкти з властивістю type, яка ідентифікує дію. Вона повинна містити мінімально необхідну інформацію, яка потрібна редуктору для обчислення наступного стану.

function Form() {
  const [state, dispatch] = useReducer(reducer, { name: 'Taylor', age: 42 });
  
  function handleButtonClick() {
    dispatch({ type: 'incremented_age' });
  }

  function handleInputChange(e) {
    dispatch({
      type: 'changed_name',
      nextName: e.target.value
    });
  }
  // ...

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

Прочитайте Вилучення логіки станів у редуктор, щоб дізнатися більше.

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      // 🚩 Don't mutate an object in state like this:
      state.age = state.age + 1;
      return state;
    }

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      // ✅ Instead, return a new object
      return {
        ...state,
        age: state.age + 1
      };
    }

Уникнення відтворення початкового стану

React зберігає початковий стан один раз і ігнорує його при наступних рендерах.

function createInitialState(username) {
  // ...
}

function TodoList({ username }) {
  const [state, dispatch] = useReducer(reducer, createInitialState(username));
  // ...

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

Щоб вирішити цю проблему, ви можете передати його як функцію-ініціалізатор функції до useReducer як третій аргумент замість:

function createInitialState(username) {
  // ...
}

function TodoList({ username }) {
  const [state, dispatch] = useReducer(reducer, username, createInitialState);
  // ...

Зверніть увагу, що ви передаєте createInitialState, яка є самою функцією, а не createInitialState(), яка є результатом її виклику. Таким чином, початковий стан не створюється повторно після ініціалізації.

У наведеному вище прикладі createInitialState отримує аргумент ім'я користувача. Якщо вашому ініціалізатору не потрібна інформація для обчислення початкового стану, ви можете передати null як другий аргумент до useReducer.

Налагодження

Я виконав дію, але журнал показує мені старе значення стану

Виклик функції dispatchне змінює стан у коді, що виконується:

function handleClick() {
  console.log(state.age);  // 42

  dispatch({ type: 'incremented_age' }); // Request a re-render with 43
  console.log(state.age);  // Still 42!

  setTimeout(() => {
    console.log(state.age); // Also 42!
  }, 5000);
}

Це тому, що стани поводяться як знімок. Оновлення стану запитує інший рендеринг з новим значенням стану, але не впливає на змінну state JavaScript у вашому вже запущеному обробнику події.

Якщо вам потрібно вгадати наступне значення стану, ви можете обчислити його вручну, викликавши редуктор самостійно:

const action = { type: 'incremented_age' };
dispatch(action);

const nextState = reducer(state, action);
console.log(state);     // { age: 42 }
console.log(nextState); // { age: 43 }

Я відправив дію, але екран не оновлюється

React проігнорує ваше оновлення, якщо наступний стан дорівнює попередньому, як визначено порівнянням Object.is. Зазвичай це трапляється, коли ви безпосередньо змінюєте об'єкт або масив у стані:

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      // 🚩 Wrong: mutating existing object
      state.age++;
      return state;
    }
    case 'changed_name': {
      // 🚩 Wrong: mutating existing object
      state.name = action.nextName;
      return state;
    }
    // ...
  }
}

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

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      // ✅ Correct: creating a new object
      return {
        ...state,
        age: state.age + 1
      };
    }
    case 'changed_name': {
      // ✅ Correct: creating a new object
      return {
        ...state,
        name: action.nextName
      };
    }
    // ...
  }
}

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

Переконайтеся, що кожна гілка case гілки копіює всі існуючі поля при поверненні нового стану:

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      return {
        ...state, // Don't forget this!
        age: state.age + 1
      };
    }
    // ...

Без ...state вище, повернутий наступний стан містив би лише поле age і нічого більше.

Весь стан мого редуктора стає невизначеним після відправлення

Якщо ваш стан несподівано стає undefined, ймовірно, ви забули повернути стан в одному з випадків, або ваш тип дії не відповідає жодному з операторів випадку. Щоб з'ясувати причину, виведіть помилку за межі switch:

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      // ...
    }
    case 'edited_name': {
      // ...
    }
  }
  throw Error('Unknown action: ' + action.type);
}

Ви також можете використовувати статичну перевірку типів, таку як TypeScript, для виявлення таких помилок.

Я отримую помилку: "Занадто багато повторних рендерингів"

Ви можете отримати помилку з повідомленням: Too many re-renders. React limits the number of renders to prevent an infinite loop. Зазвичай це означає, що ви безумовно відправляєте дію під час рендеру, тому ваш компонент потрапляє у цикл: рендер, відправка стану (яка викликає рендер), рендер, відправка стану (яка викликає рендер) і так далі. Дуже часто це спричинено помилкою у визначенні обробника події:

// 🚩 Wrong: calls the handler during render
return <button onClick={handleClick()}>Click me</button>

// ✅ Correct: passes down the event handler
return <button onClick={handleClick}>Click me</button>

// ✅ Correct: passes down an inline function
return <button onClick={(e) => handleClick(e)}>Click me</button>

Якщо ви не можете знайти причину цієї помилки, натисніть на стрілку поруч з помилкою в консолі та перегляньте стек JavaScript, щоб знайти конкретний виклик функції dispatch, відповідальний за помилку.

Моя функція редуктора або ініціалізатора запускається двічі

У Суворому режимі, React викличе ваші функції редуктора та ініціалізатора двічі. Це не повинно зламати ваш код.

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

Наприклад, ця функція нечистого редуктора мутує масив у стані:

function reducer(state, action) {
  switch (action.type) {
    case 'added_todo': {
      // 🚩 Mistake: mutating state
      state.todos.push({ id: nextId++, text: action.text });
      return state;
    }
    // ...
  }
}

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

function reducer(state, action) {
  switch (action.type) {
    case 'added_todo': {
      // ✅ Correct: replacing with new state
      return {
        ...state,
        todos: [
          ...state.todos,
          { id: nextId++, text: action.text }
        ]
      };
    }
    // ...
  }
}

Тепер, коли ця функція-редуктор є чистою, її виклик зайвий раз не впливає на поведінку. Ось чому подвійний виклик цієї функції в React допомагає знаходити помилки. Чистими мають бути лише функції компонента, ініціалізатора та редуктора. Обробники подій не мають бути чистими, тому React ніколи не викликатиме ваші обробники подій двічі.

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