Переход с useState на useReducer в React Hooks
23 июня 2023 г.
Чтобы преобразовать useState в useReducer, выполните следующие общие действия:
- Определите начальное состояние и тип действия.
- Замените хук
useStateна хукuseReducer. - Создайте функцию-редуктор, которая принимает состояние и действие и возвращает новое состояние.
- Обновите компонент, чтобы использовать новое состояние и функции отправки, возвращаемые хуком
useReducer, в который должны быть переданы редьюсер и начальное состояние.
Вот базовый пример того, как преобразовать компонент, который использует useState для управления одной частью состояния.
Начните с компонента счетчика:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</>
);
}
export default Counter;
Чтобы преобразовать это в использование useReducer, мы можем выполнить шаги, описанные выше:
- Определите начальное состояние и тип действия:
javascript
const InitialState = {количество: 0};
const INCREMENT = 'приращение';
2. Замените хук useState на хук useReducer:
```javascript импортировать React, {useReducer} из 'реакции';
const Counter = () => { const [состояние, отправка] = useReducer(reducer, initialState);
// ...
} ```
3. Создайте функцию-редуктор, которая принимает состояние и действие и возвращает новое состояние:
javascript
const reducer = (состояние, действие) => {
переключатель (действие.тип) {
УВЕЛИЧЕНИЕ случая:
вернуть {количество: state.count + 1};
по умолчанию:
выдать новую ошибку();
}
4. Обновите компонент, чтобы он использовал новое состояние и функции отправки, возвращаемые хуком useReducer, в который должны быть переданы редьюсер и начальное состояние:
```javascript const Счетчик = () => { const [состояние, отправка] = useReducer(reducer, initialState);
const increment = () => {
dispatch({ type: INCREMENT });
};
return (
<>
<p>Count: {state.count}</p>
<button onClick={increment}>Increment</button>
);
} ```
На шаге 4 функция диспетчеризации используется для отправки действия функции редуктора. Затем функция редуктора возвращает новое состояние на основе типа действия. Компонент также обновлен для использования state.count вместо переменной count, ранее возвращаемой useState.
В этом простом примере useReducer не дает много преимуществ по сравнению с useState. Но в целом по мере усложнения компонентов useReducer предоставляет более мощный и гибкий способ управления состоянием, особенно если у вас есть более сложное состояние, требующее нескольких значений и более сложных обновлений.
:::информация Первоначально эта статья была опубликована здесь.
:::
Дайте мне знать, что вы думаете в комментариях!
Оригинал