0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Мы называем состоянием все, что находится в хранилище. При этом не все состояния одинаково полезны. Документация Redux предлагает такую классификацию:</p>
1
<p>Мы называем состоянием все, что находится в хранилище. При этом не все состояния одинаково полезны. Документация Redux предлагает такую классификацию:</p>
2
<ul><li><strong>Domain data</strong>- это данные, которые нужно отображать, использовать и модифицировать (например, загруженный с сервера список пользователей)</li>
2
<ul><li><strong>Domain data</strong>- это данные, которые нужно отображать, использовать и модифицировать (например, загруженный с сервера список пользователей)</li>
3
<li><strong>App state</strong>- данные, которые определяют поведение приложения (например, открытый URL)</li>
3
<li><strong>App state</strong>- данные, которые определяют поведение приложения (например, открытый URL)</li>
4
<li><strong>UI state</strong>- данные, которые определяют внешний вид (например, вывод списка в виде плиток)</li>
4
<li><strong>UI state</strong>- данные, которые определяют внешний вид (например, вывод списка в виде плиток)</li>
5
</ul><p>Хранилище - это ядро приложения, поэтому данные внутри него должны описываться в терминах<em>domainData</em>и<em>appState</em>, а не как дерево компонентов UI.</p>
5
</ul><p>Хранилище - это ядро приложения, поэтому данные внутри него должны описываться в терминах<em>domainData</em>и<em>appState</em>, а не как дерево компонентов UI.</p>
6
<p>Например, способ формирования состояния<em>state.leftPane.todoList.todos</em>- плохая идея. Очень редко дерево компонентов отражается напрямую на структуру состояния, и это нормально. Представление зависит от данных, а не данные от представления.</p>
6
<p>Например, способ формирования состояния<em>state.leftPane.todoList.todos</em>- плохая идея. Очень редко дерево компонентов отражается напрямую на структуру состояния, и это нормально. Представление зависит от данных, а не данные от представления.</p>
7
<p>Типичная структура состояния выглядит так:</p>
7
<p>Типичная структура состояния выглядит так:</p>
8
<p>Как уже говорилось в курсе<a>JS: React</a>, структура состояния должна напоминать базу данных. Все максимально плоско и нормализованно:</p>
8
<p>Как уже говорилось в курсе<a>JS: React</a>, структура состояния должна напоминать базу данных. Все максимально плоско и нормализованно:</p>
9
<p>С такой структурой намного проще писать реакции на действия, добавлять новые данные и удалять старые. Вложенность небольшая, поэтому все просто. Но появляется другая проблема - чем больше сущностей, тем тяжелее становится редьюсер. Постепенно он превращается в огромный кусок кода, который делает все.</p>
9
<p>С такой структурой намного проще писать реакции на действия, добавлять новые данные и удалять старые. Вложенность небольшая, поэтому все просто. Но появляется другая проблема - чем больше сущностей, тем тяжелее становится редьюсер. Постепенно он превращается в огромный кусок кода, который делает все.</p>
10
<p>Чтобы решить эту проблему, можно использовать механизм, встроенный в Redux. Он позволяет создавать множественные редьюсеры и комбинировать их друг с другом. Работает это так:</p>
10
<p>Чтобы решить эту проблему, можно использовать механизм, встроенный в Redux. Он позволяет создавать множественные редьюсеры и комбинировать их друг с другом. Работает это так:</p>
11
<ul><li>Для каждого свойства верхнего уровня пишется свой редьюсер</li>
11
<ul><li>Для каждого свойства верхнего уровня пишется свой редьюсер</li>
12
<li>С помощью функции combineReducers() все редьюсеры объединяются в корневой редьюсер (<em>root</em>)</li>
12
<li>С помощью функции combineReducers() все редьюсеры объединяются в корневой редьюсер (<em>root</em>)</li>
13
<li>Корневой редьюсер используется для создания хранилища</li>
13
<li>Корневой редьюсер используется для создания хранилища</li>
14
</ul><p>В итоге действия попадают во все редьюсеры, собранные внутри combineReducers():</p>
14
</ul><p>В итоге действия попадают во все редьюсеры, собранные внутри combineReducers():</p>
15
<p>В каждый редьюсер приходит<em>state</em>, но это не все состояние хранилища, а только та часть, которая лежит в соответствующем свойстве. В примере выше в редьюсер todosReducer будет передаваться состояние из свойства todos, а в commentsReducer из comments. Эта привязка происходит через объект, который передается в combineReducers():</p>
15
<p>В каждый редьюсер приходит<em>state</em>, но это не все состояние хранилища, а только та часть, которая лежит в соответствующем свойстве. В примере выше в редьюсер todosReducer будет передаваться состояние из свойства todos, а в commentsReducer из comments. Эта привязка происходит через объект, который передается в combineReducers():</p>
16
<p>Схематично комбинацию редьюсеров можно обозначить так:</p>
16
<p>Схематично комбинацию редьюсеров можно обозначить так:</p>
17
<p>А еще редьюсеры могут быть даже вложенными. Для этого не нужны никакие специальные средства - это обычные функции, принимающие одни данные и возвращающие другие данные.</p>
17
<p>А еще редьюсеры могут быть даже вложенными. Для этого не нужны никакие специальные средства - это обычные функции, принимающие одни данные и возвращающие другие данные.</p>
18
<p>С таким подходом появляется одна особенность, которая вначале может испугать. Каждый редьюсер имеет доступ только к своей части состояния, поэтому действия, порождающие изменения сразу в нескольких местах, будут повторяться в разных редьюсерах:</p>
18
<p>С таким подходом появляется одна особенность, которая вначале может испугать. Каждый редьюсер имеет доступ только к своей части состояния, поэтому действия, порождающие изменения сразу в нескольких местах, будут повторяться в разных редьюсерах:</p>
19
<p>Правильный подход в этом случае - повторять часть case в нужных редьюсерах.</p>
19
<p>Правильный подход в этом случае - повторять часть case в нужных редьюсерах.</p>