You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Вызовите `useReducer` на верхнем уровне компонента чтобы управлять состоянием с помощью [редьюсера.](/learn/extracting-state-logic-into-a-reducer)
23
+
Вызовите `useReducer` на верхнем уровне компонента чтобы управлять состоянием с помощью [редюсера.](/learn/extracting-state-logic-into-a-reducer)
24
24
25
25
```js
26
26
import { useReducer } from'react';
@@ -38,7 +38,7 @@ function MyComponent() {
38
38
39
39
#### Параметры {/*parameters*/}
40
40
41
-
* `reducer`: Редьюсер — чистая функция, которая определяет логику обновления состояния. Редьюсер принимает два аргумента – состояние и действие, и возвращает следующее состояние. Состояние и действие могут быть любых типов.
41
+
* `reducer`: Редюсер — чистая функция, которая определяет логику обновления состояния. Редюсер принимает два аргумента – состояние и действие, и возвращает следующее состояние. Состояние и действие могут быть любых типов.
42
42
* `initialArg`: Значение на основе которого вычисляется начальное состояние. Значение начального состояния может быть любого типа. То как из него будет вычисляться начальное состояние, зависит от аргумента `init`.
43
43
* **optional** `init`: Функция инициализатора, которая возвращает начальное состояние. Если она не указана, то начальное состояние устанавливается в `initialArg`. В противном случае начальное состояние устанавливается в результат вызова `init(initialArg)`.
44
44
@@ -90,9 +90,9 @@ React установит следующее состояние как резул
90
90
91
91
## Применение {/*usage*/}
92
92
93
-
### Добавление редьюсера в компонент {/*adding-a-reducer-to-a-component*/}
93
+
### Добавление редюсера в компонент {/*adding-a-reducer-to-a-component*/}
94
94
95
-
Вызовите `useReducer` на верхнем уровне компонента, чтобы управлять состоянием компонента с помощью [редьюсера.](/learn/extracting-state-logic-into-a-reducer)
95
+
Вызовите `useReducer` на верхнем уровне компонента, чтобы управлять состоянием компонента с помощью [редюсера.](/learn/extracting-state-logic-into-a-reducer)
React передаст текущее состояние и действие в <CodeStep step={4}>редьюсер</CodeStep>. Редьюсер вычислит и вернёт следующее состояние. React сохранит это состояние, отрисует компонент и обновит пользовательский интерфейс.
122
+
React передаст текущее состояние и действие в <CodeStep step={4}>редюсер</CodeStep>. Редюсер вычислит и вернёт следующее состояние. React сохранит это состояние, отрисует компонент и обновит пользовательский интерфейс.
### Составление функции редьюсера {/*writing-the-reducer-function*/}
164
+
### Составление функции редюсера {/*writing-the-reducer-function*/}
165
165
166
166
Объявите редюсер следующим образом:
167
167
@@ -214,7 +214,7 @@ function Form() {
214
214
215
215
Имена типов действий являются локальными для вашего компонента. [Каждое действие описывает одно взаимодействие, даже если оно приводит к нескольким изменениям данных.](/learn/extracting-state-logic-into-a-reducer#writing-reducers-well) Форма состояния произвольна, но обычно это будет объект или массив.
216
216
217
-
Прочитайте про [извлечение логики состояния в редьюсер](/learn/extracting-state-logic-into-a-reducer) чтобы узнать больше.
217
+
Прочитайте про [извлечение логики состояния в редюсер](/learn/extracting-state-logic-into-a-reducer) чтобы узнать больше.
218
218
219
219
<Pitfall>
220
220
@@ -230,7 +230,7 @@ function reducer(state, action) {
230
230
}
231
231
```
232
232
233
-
Вместо этого всегда возвращайте новые объекты из вашего редьюсера:
233
+
Вместо этого всегда возвращайте новые объекты из вашего редюсера:
234
234
235
235
```js {4-8}
236
236
function reducer(state, action) {
@@ -1018,7 +1018,7 @@ function reducer(state, action) {
1018
1018
1019
1019
---
1020
1020
1021
-
### Часть состояния моего редьюсера становится неопределённой после диспетчеризации {/*a-part-of-my-reducer-state-becomes-undefined-after-dispatching*/}
1021
+
### Часть состояния моего редюсера становится неопределённой после диспетчеризации {/*a-part-of-my-reducer-state-becomes-undefined-after-dispatching*/}
1022
1022
1023
1023
Убедитесь, что каждая ветвь `case`**копирует все существующие поля**, когда возвращает новое состояние:
1024
1024
@@ -1038,7 +1038,7 @@ function reducer(state, action) {
1038
1038
1039
1039
---
1040
1040
1041
-
### Все состояние моего редьюсера становится неопределённым после диспетчеризации {/*my-entire-reducer-state-becomes-undefined-after-dispatching*/}
1041
+
### Все состояние моего редюсера становится неопределённым после диспетчеризации {/*my-entire-reducer-state-becomes-undefined-after-dispatching*/}
1042
1042
1043
1043
Если ваше состояние неожиданно становится `undefined`, скорее всего, вы забыли `возвратить` состояние в одном из случаев, или ваш тип действия не соответствует ни одному из утверждений `case`. Чтобы выяснить причину, выбросьте ошибку вне `case`:
### Моя функция редьюсера или инициализатора выполняется дважды {/*my-reducer-or-initializer-function-runs-twice*/}
1082
+
### Моя функция редюсера или инициализатора выполняется дважды {/*my-reducer-or-initializer-function-runs-twice*/}
1083
1083
1084
1084
В [строгом режиме](/reference/react/StrictMode) React будет вызывать ваши функции, редюсер и инициализатор, дважды. Это не должно сломать ваш код.
1085
1085
1086
1086
Это поведение справедливо только для **режима разработки** и помогает вам [поддерживать чистоту компонентов.](/learn/keeping-components-pure) React использует результат одного из вызовов и игнорирует результат другого вызова. Пока ваши функции компонента, инициализатора и редюсера чисты, это не должно влиять на вашу логику. Однако если они случайно оказались нечистыми, это поможет вам заметить ошибки.
1087
1087
1088
-
Например, эта нечистая функция редьюсера изменяет массив состояния напрямую:
1088
+
Например, эта нечистая функция редюсера изменяет массив состояния напрямую:
1089
1089
1090
1090
```js {4-6}
1091
1091
function reducer(state, action) {
@@ -1119,6 +1119,6 @@ function reducer(state, action) {
1119
1119
}
1120
1120
```
1121
1121
1122
-
Теперь, когда функция редьюсера является чистой, её повторный вызов не изменит поведение. Вот почему двойной вызов в React помогает найти ошибки. **Только функции компонента, инициализатора и редьюсера должны быть чистыми.** Обработчики событий не должны быть чистыми, поэтому React никогда не будет вызывать обработчики событий дважды.
1122
+
Теперь, когда функция редюсера является чистой, её повторный вызов не изменит поведение. Вот почему двойной вызов в React помогает найти ошибки. **Только функции компонента, инициализатора и редюсера должны быть чистыми.** Обработчики событий не должны быть чистыми, поэтому React никогда не будет вызывать обработчики событий дважды.
1123
1123
1124
1124
Прочитайте про [сохранение чистоты компонентов,](/learn/keeping-components-pure) чтобы узнать больше.
0 commit comments