1 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>В конце октября 2019 года вышел Redux Toolkit 1.0. Один из авторов проекта проекта и автор оригинальной публикации Марк Эриксон (Mark Erikson) рассказывает, как появился этот инструмент, делится целями создания Redux Starter Kit и объясняет, как удалось выполнить задуманное.</p>
1
<p>В конце октября 2019 года вышел Redux Toolkit 1.0. Один из авторов проекта проекта и автор оригинальной публикации Марк Эриксон (Mark Erikson) рассказывает, как появился этот инструмент, делится целями создания Redux Starter Kit и объясняет, как удалось выполнить задуманное.</p>
2
<p>Краткая информация о Redux Toolkit:</p>
2
<p>Краткая информация о Redux Toolkit:</p>
3
<ul><li>помогает быстро начать использовать Redux;</li>
3
<ul><li>помогает быстро начать использовать Redux;</li>
4
<li>упрощает работу с типичными задачами и кодом Redux;</li>
4
<li>упрощает работу с типичными задачами и кодом Redux;</li>
5
<li>позволяет использовать лучшие практики Redux по умолчанию;</li>
5
<li>позволяет использовать лучшие практики Redux по умолчанию;</li>
6
<li>предлагает решения, которые уменьшают недоверие к бойлерплейтам.</li>
6
<li>предлагает решения, которые уменьшают недоверие к бойлерплейтам.</li>
7
</ul><h2>Содержание</h2>
7
</ul><h2>Содержание</h2>
8
<ul><li><a>Истоки</a></li>
8
<ul><li><a>Истоки</a></li>
9
<li><a>Проблема сложности</a></li>
9
<li><a>Проблема сложности</a></li>
10
<li><a>В поисках решения</a></li>
10
<li><a>В поисках решения</a></li>
11
<li><a>Начало процесса</a></li>
11
<li><a>Начало процесса</a></li>
12
<li><a>Проектирование инструментов</a></li>
12
<li><a>Проектирование инструментов</a></li>
13
<li><a>Создание дорожной карты</a></li>
13
<li><a>Создание дорожной карты</a></li>
14
<li><a>Работа с API</a></li>
14
<li><a>Работа с API</a></li>
15
<li><a>Будущее Redux Toolkit</a></li>
15
<li><a>Будущее Redux Toolkit</a></li>
16
<li><a>Следующие шаги</a></li>
16
<li><a>Следующие шаги</a></li>
17
</ul><h2>Истоки</h2>
17
</ul><h2>Истоки</h2>
18
<h3>Появление Redux</h3>
18
<h3>Появление Redux</h3>
19
<p>Redux появился летом 2015 года. Он стал логическим завершением споров и войн вокруг Flux. В течение года с момента появления он обошёл другие имплементации Flux и де-факто стал стандартным инструментом для управления состояниями в React-приложениях.</p>
19
<p>Redux появился летом 2015 года. Он стал логическим завершением споров и войн вокруг Flux. В течение года с момента появления он обошёл другие имплементации Flux и де-факто стал стандартным инструментом для управления состояниями в React-приложениях.</p>
20
<p>Redux намеренно разрабатывался как расширяемый инструмент, и он стал именно таким инструментом. Вокруг проекта появилась целая экосистема аддонов: от<a>Action/Reducer Generators</a>до<a>Store Persistence</a>или<a>десятков утилит для работы с неизменяемостью</a>. Например, поскольку в Redux нет нативных инструментов для управления асинхронным поведением и побочными эффектами, появились<a>десятки аддонов для работы с побочными эффектами</a>.</p>
20
<p>Redux намеренно разрабатывался как расширяемый инструмент, и он стал именно таким инструментом. Вокруг проекта появилась целая экосистема аддонов: от<a>Action/Reducer Generators</a>до<a>Store Persistence</a>или<a>десятков утилит для работы с неизменяемостью</a>. Например, поскольку в Redux нет нативных инструментов для управления асинхронным поведением и побочными эффектами, появились<a>десятки аддонов для работы с побочными эффектами</a>.</p>
21
<p>Одним словом, если вам нужно что-то сделать с помощью Redux, с высокой долей вероятности уже есть аддон, который позволяет решить вашу задачу. В противном случае вы можете создать его самостоятельно.</p>
21
<p>Одним словом, если вам нужно что-то сделать с помощью Redux, с высокой долей вероятности уже есть аддон, который позволяет решить вашу задачу. В противном случае вы можете создать его самостоятельно.</p>
22
<h3>Цикл хайпа</h3>
22
<h3>Цикл хайпа</h3>
23
<p>Практически все инструменты и технологии проходят через<a>цикл хайпа</a>. Когда появляется новый продукт, первые пользователи в него влюбляются и считают его серебряной пулей. Потом с новым продуктом знакомится больше людей. Они замечают ограничения и недостатки. Появляются негативные отзывы. Наконец, большинство пользователей находит лучшие способы применения технологии. Инструмент получает репутацию рабочего решения со своими преимуществами и недостатками.</p>
23
<p>Практически все инструменты и технологии проходят через<a>цикл хайпа</a>. Когда появляется новый продукт, первые пользователи в него влюбляются и считают его серебряной пулей. Потом с новым продуктом знакомится больше людей. Они замечают ограничения и недостатки. Появляются негативные отзывы. Наконец, большинство пользователей находит лучшие способы применения технологии. Инструмент получает репутацию рабочего решения со своими преимуществами и недостатками.</p>
24
<p>Redux тоже прошёл через цикл хайпа. Разработчики быстро стали ассоциировать его с React. Появилась если не догма, то устойчивое мнение об обязательном использовании Redux там, где используется React. Некоторые senior-разработчики стали говорить новичкам, что они должны использовать Redux, если используют React.</p>
24
<p>Redux тоже прошёл через цикл хайпа. Разработчики быстро стали ассоциировать его с React. Появилась если не догма, то устойчивое мнение об обязательном использовании Redux там, где используется React. Некоторые senior-разработчики стали говорить новичкам, что они должны использовать Redux, если используют React.</p>
25
<p>В результате многие люди стали изучать Redux без осознания контекста. Новички часто не понимали, почему появился Redux, какие проблемы решает этот инструмент. Слепое использование любого инструмента - прямой путь к большим проблемам.</p>
25
<p>В результате многие люди стали изучать Redux без осознания контекста. Новички часто не понимали, почему появился Redux, какие проблемы решает этот инструмент. Слепое использование любого инструмента - прямой путь к большим проблемам.</p>
26
<blockquote><p><strong>Слепое использование любого инструмента - прямой путь к большим проблемам.</strong></p>
26
<blockquote><p><strong>Слепое использование любого инструмента - прямой путь к большим проблемам.</strong></p>
27
</blockquote><p>Некоторые люди успешно использовали Redux и были довольны его возможностями. Другие заметили недостатки, причём не только реальные, но и придуманные.</p>
27
</blockquote><p>Некоторые люди успешно использовали Redux и были довольны его возможностями. Другие заметили недостатки, причём не только реальные, но и придуманные.</p>
28
<h2>Проблема сложности</h2>
28
<h2>Проблема сложности</h2>
29
<p>Есть несколько факторов, которые в сумме делают использование Redux довольно сложным по сравнению с другими инструментами. Вот эти факторы:</p>
29
<p>Есть несколько факторов, которые в сумме делают использование Redux довольно сложным по сравнению с другими инструментами. Вот эти факторы:</p>
30
<ul><li>Redux намеренно добавляет уровень косвенности в идею управления состояниями. Как<a>отмечает Дэн Абрамов</a>, Redux не создавался в качестве самого производительного или самого простого инструмента управления мутациями. Он фокусируется на предсказуемости кода.</li>
30
<ul><li>Redux намеренно добавляет уровень косвенности в идею управления состояниями. Как<a>отмечает Дэн Абрамов</a>, Redux не создавался в качестве самого производительного или самого простого инструмента управления мутациями. Он фокусируется на предсказуемости кода.</li>
31
<li><a>Общепринятые практики в Redux предполагают дополнительный уровень косвенности и использование "кода, который должен быть написан"</a>: это создатели действий, константы типов действий, thunk’и, switch-выражения, неизменяемые обновления.</li>
31
<li><a>Общепринятые практики в Redux предполагают дополнительный уровень косвенности и использование "кода, который должен быть написан"</a>: это создатели действий, константы типов действий, thunk’и, switch-выражения, неизменяемые обновления.</li>
32
<li>Также для Redux написано много "правил", которые, впрочем, не соблюдаются самим Redux. Например, речь идёт о неизменяемости, сериализации, избегании побочных эффектов.</li>
32
<li>Также для Redux написано много "правил", которые, впрочем, не соблюдаются самим Redux. Например, речь идёт о неизменяемости, сериализации, избегании побочных эффектов.</li>
33
<li>JavaScript - мутабельный язык программирования, поэтому писать<a>корректный иммутабельный код</a>на нём сложно. Это связано как с необходимостью избегать случайных мутаций, так и с большим количеством кода, который нужно написать, чтобы управлять обновлениями без изменяемости.</li>
33
<li>JavaScript - мутабельный язык программирования, поэтому писать<a>корректный иммутабельный код</a>на нём сложно. Это связано как с необходимостью избегать случайных мутаций, так и с большим количеством кода, который нужно написать, чтобы управлять обновлениями без изменяемости.</li>
34
<li>Redux всегда был инструментом с небольшим ядром, вокруг которого сформирована большая экосистема аддонов. Это позволяет пользователю выбирать настройки контейнера самостоятельно. С одной стороны, такой подход обеспечивает гибкость. С другой, даже простые задачи требуют от разработчика достаточно сложных действий, например, добавления мидлваров в асинхронную логику или настройку инструментов разработчика. Также это значит, что пользователь должен осознанно выбирать аддоны на ранних стадиях разработки, даже если приложение простое.</li>
34
<li>Redux всегда был инструментом с небольшим ядром, вокруг которого сформирована большая экосистема аддонов. Это позволяет пользователю выбирать настройки контейнера самостоятельно. С одной стороны, такой подход обеспечивает гибкость. С другой, даже простые задачи требуют от разработчика достаточно сложных действий, например, добавления мидлваров в асинхронную логику или настройку инструментов разработчика. Также это значит, что пользователь должен осознанно выбирать аддоны на ранних стадиях разработки, даже если приложение простое.</li>
35
<li>Концепции функционального программирования сложны и незнакомы большинству пользователей, особенно людям с бэкграундом в ООП.</li>
35
<li>Концепции функционального программирования сложны и незнакомы большинству пользователей, особенно людям с бэкграундом в ООП.</li>
36
</ul><p>Как большинство ранних пользователей, первые пользователи Redux относились к категории продвинутых. Конфигурация, настройка и "ручная имплементация, которая позволяет контролировать все нюансы" были ключевыми преимуществами, с помощью которых инструмент привлекал новых пользователей. Тем не менее эти преимущества стали недостатками, когда в Redux пришло много новых пользователей с разным опытом и уровнем подготовки. Многие новички рассматривали паттерны и практики просто как бойлерплейт, с которым сложно работать. Поэтому они искали другие решения.</p>
36
</ul><p>Как большинство ранних пользователей, первые пользователи Redux относились к категории продвинутых. Конфигурация, настройка и "ручная имплементация, которая позволяет контролировать все нюансы" были ключевыми преимуществами, с помощью которых инструмент привлекал новых пользователей. Тем не менее эти преимущества стали недостатками, когда в Redux пришло много новых пользователей с разным опытом и уровнем подготовки. Многие новички рассматривали паттерны и практики просто как бойлерплейт, с которым сложно работать. Поэтому они искали другие решения.</p>
37
<p>В дополнение к минимально необходимым, но сложным редьюсерам и диспетчеризации действий проблемой стала случайная сложность. Например, документация Redux рекомендует организовывать код в файлы и директории по действиям, константам, редьюсерам и контейнерам. Есть<a>веские причины</a>распределять код в файлы по типам. В то же время<a>нет обязательных требований</a>писать действия, редьюсеры и константы в отдельных файлах или директориях. Большинство пользователей читали документацию и выполняли рекомендации, поэтому организация кода по действиям, константам, редьюсерам и контейнером стала стандартным паттерном.</p>
37
<p>В дополнение к минимально необходимым, но сложным редьюсерам и диспетчеризации действий проблемой стала случайная сложность. Например, документация Redux рекомендует организовывать код в файлы и директории по действиям, константам, редьюсерам и контейнерам. Есть<a>веские причины</a>распределять код в файлы по типам. В то же время<a>нет обязательных требований</a>писать действия, редьюсеры и константы в отдельных файлах или директориях. Большинство пользователей читали документацию и выполняли рекомендации, поэтому организация кода по действиям, константам, редьюсерам и контейнером стала стандартным паттерном.</p>
38
<p>Похожий пример: написание типов действий как констант ( const ADD_TODO = "ADD_TODO" ) или наличие функций, создающих действие для каждого типа, также не требуется в обязательном порядке. Но эти подходы вошли в<a>рекомендованные паттерны</a>, а пользователи активно следуют этим рекомендациям.</p>
38
<p>Похожий пример: написание типов действий как констант ( const ADD_TODO = "ADD_TODO" ) или наличие функций, создающих действие для каждого типа, также не требуется в обязательном порядке. Но эти подходы вошли в<a>рекомендованные паттерны</a>, а пользователи активно следуют этим рекомендациям.</p>
39
<p>Необходимость выбирать аддоны часто вызывала сложности у пользователей. Болевой точкой стало большое количество библиотек с побочными эффектами, в каждой из которых используется своя терминология. Уже через год после появления Redux стало понятно, что<a>побочные эффекты - большая проблема</a>.</p>
39
<p>Необходимость выбирать аддоны часто вызывала сложности у пользователей. Болевой точкой стало большое количество библиотек с побочными эффектами, в каждой из которых используется своя терминология. Уже через год после появления Redux стало понятно, что<a>побочные эффекты - большая проблема</a>.</p>
40
<p>Экосистема держалась<a>на thunk, сагах и наблюдаемых объектах</a>. Одним из самых распространённых вопросов у пользователей стал<a>"как мне выбрать мидлвар для работы с побочными эффектами"</a>. Кстати,<a>thunk изначально были в ядре Redux</a>, но их убрали из него ради дополнительной гибкости. Очевидно, что пользователи нуждались в "официальных" инструментах для работы с побочными эффектами.</p>
40
<p>Экосистема держалась<a>на thunk, сагах и наблюдаемых объектах</a>. Одним из самых распространённых вопросов у пользователей стал<a>"как мне выбрать мидлвар для работы с побочными эффектами"</a>. Кстати,<a>thunk изначально были в ядре Redux</a>, но их убрали из него ради дополнительной гибкости. Очевидно, что пользователи нуждались в "официальных" инструментах для работы с побочными эффектами.</p>
41
<h2>В поисках решения</h2>
41
<h2>В поисках решения</h2>
42
<p>Автор оригинальной публикации погрузился в работу над Redux в 2016 году, когда в качестве волонтёра писал<a>раздел FAQ</a>на официальном сайте проекта. Дэн Абрамов выдал автору и Тиму Дорру карт-бланш, и автор начал отвечать на вопросы пользователей на разных сайтах и форумах.</p>
42
<p>Автор оригинальной публикации погрузился в работу над Redux в 2016 году, когда в качестве волонтёра писал<a>раздел FAQ</a>на официальном сайте проекта. Дэн Абрамов выдал автору и Тиму Дорру карт-бланш, и автор начал отвечать на вопросы пользователей на разных сайтах и форумах.</p>
43
<p>К весне 2017 года автор заметил изменения в сообществе: большинство пользователей не понимали, для чего создавался Redux, а также почему существуют типичные паттерны применения этого инструмента. Автор попытался исправить это с помощью нескольких подробных публикаций:<a>"Дао Redux, часть 1: реализация и намерение"</a>и<a>"Дао Redux, часть 2: практика и философия"</a>. Эти статьи рассказывают, для чего создан Redux и как его планировалось использовать.</p>
43
<p>К весне 2017 года автор заметил изменения в сообществе: большинство пользователей не понимали, для чего создавался Redux, а также почему существуют типичные паттерны применения этого инструмента. Автор попытался исправить это с помощью нескольких подробных публикаций:<a>"Дао Redux, часть 1: реализация и намерение"</a>и<a>"Дао Redux, часть 2: практика и философия"</a>. Эти статьи рассказывают, для чего создан Redux и как его планировалось использовать.</p>
44
<p>Примерно в то же время автор<a>открыл issue</a>в репозитории Redux. В нём поднимались такие вопросы:</p>
44
<p>Примерно в то же время автор<a>открыл issue</a>в репозитории Redux. В нём поднимались такие вопросы:</p>
45
<ul><li>Каким должно быть идиоматическое использование Redux с условием ухода от бойлерплейта? Как мы можем реагировать на подобные жалобы?</li>
45
<ul><li>Каким должно быть идиоматическое использование Redux с условием ухода от бойлерплейта? Как мы можем реагировать на подобные жалобы?</li>
46
<li>Какие абстракции можно создать, чтобы упростить изучение и использование Redux без необходимости прятать этот инструмент?</li>
46
<li>Какие абстракции можно создать, чтобы упростить изучение и использование Redux без необходимости прятать этот инструмент?</li>
47
</ul><p>В первом ответе Джастин Фалькон (Justin Falcone) предположил следующее:</p>
47
</ul><p>В первом ответе Джастин Фалькон (Justin Falcone) предположил следующее:</p>
48
<ul><li>Нужен официальный пакет redux-preset с redux, react-redux, redux-thunk.</li>
48
<ul><li>Нужен официальный пакет redux-preset с redux, react-redux, redux-thunk.</li>
49
<li>Нужны создатели редьюсеров, например, createReducer({[actionType]: (state, payload) => state}, initState).</li>
49
<li>Нужны создатели редьюсеров, например, createReducer({[actionType]: (state, payload) => state}, initState).</li>
50
</ul><p>Эти предположения стали основой будущего Redux Toolkit.</p>
50
</ul><p>Эти предположения стали основой будущего Redux Toolkit.</p>
51
<p>В треде появилось более сотни комментариев. В итоге некоторые пользователи просто рекламировали свои библиотеки для работы с абстракциями. В середине треда Дэн Абрамов оставил<a>свои пожелания</a>:</p>
51
<p>В треде появилось более сотни комментариев. В итоге некоторые пользователи просто рекламировали свои библиотеки для работы с абстракциями. В середине треда Дэн Абрамов оставил<a>свои пожелания</a>:</p>
52
<ul><li>Подмножество Flow/TypeScript, с которым проще работать, чем с чистым Redux.</li>
52
<ul><li>Подмножество Flow/TypeScript, с которым проще работать, чем с чистым Redux.</li>
53
<li>Уход от выделения констант, просто сделайте строковые литералы более безопасными.</li>
53
<li>Уход от выделения констант, просто сделайте строковые литералы более безопасными.</li>
54
<li>Сохранение независимости от React и других библиотек, но с упрощением использования существующих зависимостей, например, можно предоставить реализации mapStateToProps.</li>
54
<li>Сохранение независимости от React и других библиотек, но с упрощением использования существующих зависимостей, например, можно предоставить реализации mapStateToProps.</li>
55
<li>Сохранение принципов Redux: сериализуемые действия, путешествия во времени и горячая перезагрузка должны работать, журнал действий должен иметь смысл.</li>
55
<li>Сохранение принципов Redux: сериализуемые действия, путешествия во времени и горячая перезагрузка должны работать, журнал действий должен иметь смысл.</li>
56
<li>Разделение кода простым способом из коробки.</li>
56
<li>Разделение кода простым способом из коробки.</li>
57
<li>Поддержка использования редьюсеров с селекторами, а также создание условий, в которых они не будут казаться ужасными вместе (подумайте о парах редьюсер-селектор, которые легко писать).</li>
57
<li>Поддержка использования редьюсеров с селекторами, а также создание условий, в которых они не будут казаться ужасными вместе (подумайте о парах редьюсер-селектор, которые легко писать).</li>
58
<li>Вместо совмещения создателей действий с редьюсерами, стоит полностью уйти от создателей действий.</li>
58
<li>Вместо совмещения создателей действий с редьюсерами, стоит полностью уйти от создателей действий.</li>
59
<li>Принять разумные значения производительности по умолчанию, чтобы мемоизация через Reselect просто работала без необходимости самостоятельно писать код.</li>
59
<li>Принять разумные значения производительности по умолчанию, чтобы мемоизация через Reselect просто работала без необходимости самостоятельно писать код.</li>
60
<li>Создание встроенных помощников для индексации, нормализации, коллекций.</li>
60
<li>Создание встроенных помощников для индексации, нормализации, коллекций.</li>
61
<li>Поддержка встроенного тестируемого асинхронного потока.</li>
61
<li>Поддержка встроенного тестируемого асинхронного потока.</li>
62
<li>Инструмент должен быть брендированным и позиционироваться в качестве официального.</li>
62
<li>Инструмент должен быть брендированным и позиционироваться в качестве официального.</li>
63
</ul><h2>Начало процесса</h2>
63
</ul><h2>Начало процесса</h2>
64
<p>В феврале 2018 Ник Маккерди (Nick McCurdy) открыл issue, в котором<a>предложил внедрить заморозку состояния на стадии разработки</a>. Автор оригинальной публикации написал в треде такой комментарий:</p>
64
<p>В феврале 2018 Ник Маккерди (Nick McCurdy) открыл issue, в котором<a>предложил внедрить заморозку состояния на стадии разработки</a>. Автор оригинальной публикации написал в треде такой комментарий:</p>
65
<p>"Я уже писал, что хочу создать стартовый пакет, в котором будет официально рекомендованный командой Redux и простой набор инструментов. Я посмотрел десятки вариантов, включая вариант Create React App + Redux, но пока мы ничего не одобрили.</p>
65
<p>"Я уже писал, что хочу создать стартовый пакет, в котором будет официально рекомендованный командой Redux и простой набор инструментов. Я посмотрел десятки вариантов, включая вариант Create React App + Redux, но пока мы ничего не одобрили.</p>
66
<p>Настоящая проблема в том, что ядро Redux из коробки вообще не имеет установленных конфигураций. Мы не предполагаем, какой мидлвар будет использовать разработчик, и будет ли он вообще его использовать. Поэтому мы не можем просто добавить мидлвар в ядро, потому что в ядре из коробки нет установленных конфигураций".</p>
66
<p>Настоящая проблема в том, что ядро Redux из коробки вообще не имеет установленных конфигураций. Мы не предполагаем, какой мидлвар будет использовать разработчик, и будет ли он вообще его использовать. Поэтому мы не можем просто добавить мидлвар в ядро, потому что в ядре из коробки нет установленных конфигураций".</p>
67
<p>В ответ Тим Дорр<a>открыл issue</a>и написал следующее:</p>
67
<p>В ответ Тим Дорр<a>открыл issue</a>и написал следующее:</p>
68
<p>"Похоже, для успешного начала работы с библиотекой было бы полезно сделать стартеркит с ядром Redux, в которым также должны быть несколько общих мидлваров, несколько расширителей (enhancers).</p>
68
<p>"Похоже, для успешного начала работы с библиотекой было бы полезно сделать стартеркит с ядром Redux, в которым также должны быть несколько общих мидлваров, несколько расширителей (enhancers).</p>
69
<p>В моём представлении в стартовом пакете должна быть одна из библиотек редьюсеров, популярные мидлвары, например, thunk’и и саги, полезные инструменты разработки. Можно сделать подмножество пакетов для тех, кто использует React.</p>
69
<p>В моём представлении в стартовом пакете должна быть одна из библиотек редьюсеров, популярные мидлвары, например, thunk’и и саги, полезные инструменты разработки. Можно сделать подмножество пакетов для тех, кто использует React.</p>
70
<p>Не думаю, что нужно делать что-то похожее на Create React App. Но нам нужно что-то, что из коробки даёт все инструменты, нужные для начала работы".</p>
70
<p>Не думаю, что нужно делать что-то похожее на Create React App. Но нам нужно что-то, что из коробки даёт все инструменты, нужные для начала работы".</p>
71
<p>После этого на Reactiflux началась продуктивная дискуссия с участием автора оригинальной публикации, Ника Маккерди и Гарри Волфа (Harry Wolff). По её итогам Гарри Волф написал, что могло бы быть в стартовом пакете Redux:</p>
71
<p>После этого на Reactiflux началась продуктивная дискуссия с участием автора оригинальной публикации, Ника Маккерди и Гарри Волфа (Harry Wolff). По её итогам Гарри Волф написал, что могло бы быть в стартовом пакете Redux:</p>
72
<ul><li>обёртка для createStore с хорошим набором дефолтных инструментов, например, простой способ добавления мидлваров, инструменты разработчика Redux;</li>
72
<ul><li>обёртка для createStore с хорошим набором дефолтных инструментов, например, простой способ добавления мидлваров, инструменты разработчика Redux;</li>
73
<li>встроенный хелпер для работы с неизменяемостью (<a>Immer</a>?);</li>
73
<li>встроенный хелпер для работы с неизменяемостью (<a>Immer</a>?);</li>
74
<li>встроенный createReducer;</li>
74
<li>встроенный createReducer;</li>
75
<li>создатель действий, который совместим с FSA;</li>
75
<li>создатель действий, который совместим с FSA;</li>
76
<li>поддержка асинхронных действий, поддержка побочных эффектов - Flux, сага, что-то ещё?</li>
76
<li>поддержка асинхронных действий, поддержка побочных эффектов - Flux, сага, что-то ещё?</li>
77
</ul><p>На следующий день автор этой статьи<a>опубликовал</a>пример реализации configureStore и createReducer. Ещё через два дня автор<a>опубликовал Redux Starter Kit</a>как экспериментальный пакет.</p>
77
</ul><p>На следующий день автор этой статьи<a>опубликовал</a>пример реализации configureStore и createReducer. Ещё через два дня автор<a>опубликовал Redux Starter Kit</a>как экспериментальный пакет.</p>
78
<h2>Проектирование инструментов</h2>
78
<h2>Проектирование инструментов</h2>
79
<h3>Первые имплементации и нейминг</h3>
79
<h3>Первые имплементации и нейминг</h3>
80
<p>Работа над Redux Toolkit продолжалась в течение нескольких следующих месяцев. Ник добавил первые юнит-тесты, интеграцию с CI, включил инструменты разработчика Redux в configureStore. Автор статьи добавил реэкспорт из Redux и библиотеку selectorator, а также улучшил настройки мидлваров. После высокой активности с марта по май 2018 наступил период затишья, который продолжался несколько месяцев.</p>
80
<p>Работа над Redux Toolkit продолжалась в течение нескольких следующих месяцев. Ник добавил первые юнит-тесты, интеграцию с CI, включил инструменты разработчика Redux в configureStore. Автор статьи добавил реэкспорт из Redux и библиотеку selectorator, а также улучшил настройки мидлваров. После высокой активности с марта по май 2018 наступил период затишья, который продолжался несколько месяцев.</p>
81
<p>Автор публикации ощутил выгорание летом 2018 года из-за высокой нагрузки. После обдумывания ситуации он решил сосредоточиться на обязанностях мейнтейнера проекта. Это предполагало в числе других активностей популяризацию Redux Starter Kit.</p>
81
<p>Автор публикации ощутил выгорание летом 2018 года из-за высокой нагрузки. После обдумывания ситуации он решил сосредоточиться на обязанностях мейнтейнера проекта. Это предполагало в числе других активностей популяризацию Redux Starter Kit.</p>
82
<p>Выбранное название казалось отвлечённым. Именно поэтому автор статьи опубликовал инструмент как личный пакет. В августе 2018 года он<a>открыл issue</a>, в котором начал дискуссию о финальном названии инструмента. В числе прочего предлагалось использовать префикс @redux.</p>
82
<p>Выбранное название казалось отвлечённым. Именно поэтому автор статьи опубликовал инструмент как личный пакет. В августе 2018 года он<a>открыл issue</a>, в котором начал дискуссию о финальном названии инструмента. В числе прочего предлагалось использовать префикс @redux.</p>
83
<p>Дискуссия продолжалась до середины октября 2018 года. Один из участников предложил вернуться к простому варианту redux-starter-kit. Проблема была в том, что кто-то уже опубликовал пакет с названием redux-toolkit на npm. Автор статьи на всякий случай обратился к владельцу пакета с ником @shotak и спросил, не может ли он подарить имя redux-toolkit. К удивлению автора, человек ответил в течение нескольких часов и согласился подарить имя. После этого автор опубликовал первую официальную версию инструмента.</p>
83
<p>Дискуссия продолжалась до середины октября 2018 года. Один из участников предложил вернуться к простому варианту redux-starter-kit. Проблема была в том, что кто-то уже опубликовал пакет с названием redux-toolkit на npm. Автор статьи на всякий случай обратился к владельцу пакета с ником @shotak и спросил, не может ли он подарить имя redux-toolkit. К удивлению автора, человек ответил в течение нескольких часов и согласился подарить имя. После этого автор опубликовал первую официальную версию инструмента.</p>
84
<h3>Работа над функциональностью</h3>
84
<h3>Работа над функциональностью</h3>
85
<p>Функции createReducer и createAction уже были полезными. Но автор статьи хотел найти более простые инструменты.</p>
85
<p>Функции createReducer и createAction уже были полезными. Но автор статьи хотел найти более простые инструменты.</p>
86
<p>Команда<a>обсуждала использование хелперов</a>из пакетов типа redux-utilities.</p>
86
<p>Команда<a>обсуждала использование хелперов</a>из пакетов типа redux-utilities.</p>
87
<p>Автор публикации видел десятки подобных библиотек. Одна из библиотек, которая привлекла внимание автора -<a>autodux Эрика Эллиотта</a>. Она позволяет пользователям автоматически генерировать создателей действий и типы действий на основе объекта с редьюсерами и префикса с именем.</p>
87
<p>Автор публикации видел десятки подобных библиотек. Одна из библиотек, которая привлекла внимание автора -<a>autodux Эрика Эллиотта</a>. Она позволяет пользователям автоматически генерировать создателей действий и типы действий на основе объекта с редьюсерами и префикса с именем.</p>
88
<p>Шон Ванг (Shawn Wang)<a>оценил</a>autodux и несколько других пакетов. Вот выдержка:</p>
88
<p>Шон Ванг (Shawn Wang)<a>оценил</a>autodux и несколько других пакетов. Вот выдержка:</p>
89
<p>"Использование autodux даёт мощный набор создателей, селекторов и редьюсеров из коробки. Поэтому вы можете писать действия для бизнес-логики без дополнительных усилий. Мне нравится autodux".</p>
89
<p>"Использование autodux даёт мощный набор создателей, селекторов и редьюсеров из коробки. Поэтому вы можете писать действия для бизнес-логики без дополнительных усилий. Мне нравится autodux".</p>
90
<p>В конце концов autodux стал источником вдохновения при создании самой полезной части Redux Toolkit:<a>функции createSlice</a>.</p>
90
<p>В конце концов autodux стал источником вдохновения при создании самой полезной части Redux Toolkit:<a>функции createSlice</a>.</p>
91
<p>Эрик Боуэр (Eric Bower)<a>попробовал портировать</a>autodaz в createSlice. Пулреквест застопорился. Автор статьи узнал о<a>библиотеке robodux, в которой используется Immer</a>. Он понял, что Эрик Боуэр решил сделать собственную версию библиотеки на TypeScript.</p>
91
<p>Эрик Боуэр (Eric Bower)<a>попробовал портировать</a>autodaz в createSlice. Пулреквест застопорился. Автор статьи узнал о<a>библиотеке robodux, в которой используется Immer</a>. Он понял, что Эрик Боуэр решил сделать собственную версию библиотеки на TypeScript.</p>
92
<p>После обсуждения Боуэр согласился вернуть код в Redux Toolkit. Автор скомпилировал код библиотеки в чистый JavaScript и включил его в стартеркит.</p>
92
<p>После обсуждения Боуэр согласился вернуть код в Redux Toolkit. Автор скомпилировал код библиотеки в чистый JavaScript и включил его в стартеркит.</p>
93
<h2>Создание дорожной карты</h2>
93
<h2>Создание дорожной карты</h2>
94
<p>В начале декабря 2018 года с помощью Docusaurus<a>была опубликована документация Redux Toolkit</a>.</p>
94
<p>В начале декабря 2018 года с помощью Docusaurus<a>была опубликована документация Redux Toolkit</a>.</p>
95
<p>Автор статьи добавил в стартеркит дефолтные<a>мидлвары для определения мутаций и несериализируемых значений</a>, а также<a>возможность трассировки стека</a>.</p>
95
<p>Автор статьи добавил в стартеркит дефолтные<a>мидлвары для определения мутаций и несериализируемых значений</a>, а также<a>возможность трассировки стека</a>.</p>
96
<p>В конце января 2019 года автор статьи<a>открыл issue</a>, в котором предложил обсудить дорожную карту к выпуску redux Starter Kit 1.0, а также начал работать<a>над способностью слайсов слушать другие действия</a>. Дэнис Вашингтон (Denis Washington) прокомментировал этот пулреквест. Он предложил<a>обсудить целесообразность использования createSlice</a>.</p>
96
<p>В конце января 2019 года автор статьи<a>открыл issue</a>, в котором предложил обсудить дорожную карту к выпуску redux Starter Kit 1.0, а также начал работать<a>над способностью слайсов слушать другие действия</a>. Дэнис Вашингтон (Denis Washington) прокомментировал этот пулреквест. Он предложил<a>обсудить целесообразность использования createSlice</a>.</p>
97
<p>В ответ автор публикации написал большой комментарий. Вот выдержки:</p>
97
<p>В ответ автор публикации написал большой комментарий. Вот выдержки:</p>
98
<h4>Цели</h4>
98
<h4>Цели</h4>
99
<p>Согласно README, в числе прочих источниками вдохновения для создателей Redux Toolkit являются Create-React-App и Apollo-Boost. Это пакеты, в которых есть дефолтные инструменты и абстракции над более сложными настраиваемыми инструментами. Цель существования этих пакетов - обеспечить быстрый старт при работе с библиотекой без необходимости погружаться в детали и принимать сложные решения. В то же время эти пакеты не привязывают разработчика к дефолтным инструментам и настройкам. Они очень полезны для новичков, которые не знают о всех доступных вариантах и о "правильных" выборах. Также пакеты полезны для опытных разработчиков, которым нужен простой инструмент, не требующий настройки окружения.</p>
99
<p>Согласно README, в числе прочих источниками вдохновения для создателей Redux Toolkit являются Create-React-App и Apollo-Boost. Это пакеты, в которых есть дефолтные инструменты и абстракции над более сложными настраиваемыми инструментами. Цель существования этих пакетов - обеспечить быстрый старт при работе с библиотекой без необходимости погружаться в детали и принимать сложные решения. В то же время эти пакеты не привязывают разработчика к дефолтным инструментам и настройкам. Они очень полезны для новичков, которые не знают о всех доступных вариантах и о "правильных" выборах. Также пакеты полезны для опытных разработчиков, которым нужен простой инструмент, не требующий настройки окружения.</p>
100
<p>Я хочу, чтобы Redux Toolkit стал таким же инструментом для Redux.</p>
100
<p>Я хочу, чтобы Redux Toolkit стал таким же инструментом для Redux.</p>
101
<h4>Быстрый старт</h4>
101
<h4>Быстрый старт</h4>
102
<p>Я хочу, чтобы люди начинали работать с Redux как можно быстрее.</p>
102
<p>Я хочу, чтобы люди начинали работать с Redux как можно быстрее.</p>
103
<h4>Упрощение основных способов применения и уход от бойлерплейтов</h4>
103
<h4>Упрощение основных способов применения и уход от бойлерплейтов</h4>
104
<p>Я хочу убрать острые углы:</p>
104
<p>Я хочу убрать острые углы:</p>
105
<ul><li>сократить код где это возможно;</li>
105
<ul><li>сократить код где это возможно;</li>
106
<li>предложить функции, которые выполняют очевидные действия, которые пользователи привыкли делать руками;</li>
106
<li>предложить функции, которые выполняют очевидные действия, которые пользователи привыкли делать руками;</li>
107
<li>посмотреть, как люди используют Redux и как они хотят его использовать, и предложить "официальное" решение на основе предпочтений пользователей.</li>
107
<li>посмотреть, как люди используют Redux и как они хотят его использовать, и предложить "официальное" решение на основе предпочтений пользователей.</li>
108
</ul><p>Redux Toolkit должен вести пользователя к правильным настройкам, а также автоматически защищать от распространённых ошибок или предупреждать о них.</p>
108
</ul><p>Redux Toolkit должен вести пользователя к правильным настройкам, а также автоматически защищать от распространённых ошибок или предупреждать о них.</p>
109
<h4>Отсутствие блокировки</h4>
109
<h4>Отсутствие блокировки</h4>
110
<p>Когда кто-то начинает делать приложение на базе Redux Toolkit, я не хочу забирать у него возможность сделать что-то вручную в начале или в процессе работы.</p>
110
<p>Когда кто-то начинает делать приложение на базе Redux Toolkit, я не хочу забирать у него возможность сделать что-то вручную в начале или в процессе работы.</p>
111
<p>С другой стороны, люди должны иметь возможность добавлять Redux Toolkit в существующие приложения. В таких случаях у разработчиков должна быть возможность внедрять стартеркит постепенно без необходимости переписывать код с нуля.</p>
111
<p>С другой стороны, люди должны иметь возможность добавлять Redux Toolkit в существующие приложения. В таких случаях у разработчиков должна быть возможность внедрять стартеркит постепенно без необходимости переписывать код с нуля.</p>
112
<h4>Стать очевидным дефолтным способом использования Redux</h4>
112
<h4>Стать очевидным дефолтным способом использования Redux</h4>
113
<p>В долгосрочной перспективе автор видит Redux Toolkit очевидным дефолтным способом использования Redux для большинства разработчиков. В качестве примера можно посмотреть на Create React App, который стал дефолтным очевидным способом использования React.</p>
113
<p>В долгосрочной перспективе автор видит Redux Toolkit очевидным дефолтным способом использования Redux для большинства разработчиков. В качестве примера можно посмотреть на Create React App, который стал дефолтным очевидным способом использования React.</p>
114
<h4>Отказ от попыток охватить все способы использования Redux, фокусировка на типичных подходах</h4>
114
<h4>Отказ от попыток охватить все способы использования Redux, фокусировка на типичных подходах</h4>
115
<p>Есть много способов использования Redux. А в ядре Redux есть минимальный набор инструментов. Именно поэтому существуют тысячи библиотек и аддонов, который охватывают разные кейсы применения Redux. Стартеркит не может и не собирается охватывать все способы применения Redux.</p>
115
<p>Есть много способов использования Redux. А в ядре Redux есть минимальный набор инструментов. Именно поэтому существуют тысячи библиотек и аддонов, который охватывают разные кейсы применения Redux. Стартеркит не может и не собирается охватывать все способы применения Redux.</p>
116
<h4>Разумная поддержка TypeScript</h4>
116
<h4>Разумная поддержка TypeScript</h4>
117
<p>Автор хочет поддерживать специалистов, которые пишут на TypeScript, как и других специалистов, которые используют Redux специфическим способом. Поэтому в Redux Toolkit должна быть хорошая типизация. В то же время автор не хочет, чтобы "лучшая типизация" стала врагом "хорошей функциональности".</p>
117
<p>Автор хочет поддерживать специалистов, которые пишут на TypeScript, как и других специалистов, которые используют Redux специфическим способом. Поэтому в Redux Toolkit должна быть хорошая типизация. В то же время автор не хочет, чтобы "лучшая типизация" стала врагом "хорошей функциональности".</p>
118
<h2>Работа с API</h2>
118
<h2>Работа с API</h2>
119
<p>Параллельно с этой дискуссией Дэнис Вашингтон конвертировал базу Redux Toolkit в TypeScript.</p>
119
<p>Параллельно с этой дискуссией Дэнис Вашингтон конвертировал базу Redux Toolkit в TypeScript.</p>
120
<p>Автор публикации потратил несколько месяцев на работу с<a>дорожной картой React-Redux 7</a>. Потом он работал с<a>дизайном хуков API</a>.</p>
120
<p>Автор публикации потратил несколько месяцев на работу с<a>дорожной картой React-Redux 7</a>. Потом он работал с<a>дизайном хуков API</a>.</p>
121
<p>Одновременно команда обсуждала разные вопросы, включая<a>расширение возможностей createSlice</a>. Рассматривалась функция combineSlices, а также автогенерируемый селектор функциональности.</p>
121
<p>Одновременно команда обсуждала разные вопросы, включая<a>расширение возможностей createSlice</a>. Рассматривалась функция combineSlices, а также автогенерируемый селектор функциональности.</p>
122
<p>К лету 2019 года автор завершил работу над React-Redux и начал писать<a>документацию Redux Toolkit</a>. В начале сентября она была готова.</p>
122
<p>К лету 2019 года автор завершил работу над React-Redux и начал писать<a>документацию Redux Toolkit</a>. В начале сентября она была готова.</p>
123
<p>Тем временем Ленц Вебер (Lenz Weber) предложил несколько улучшений, включая<a>внедрение колбэка prepare в createAction</a>, а также<a>улучшение читабельности определений типов</a>.</p>
123
<p>Тем временем Ленц Вебер (Lenz Weber) предложил несколько улучшений, включая<a>внедрение колбэка prepare в createAction</a>, а также<a>улучшение читабельности определений типов</a>.</p>
124
<p>С этого момента автор начал "допиливать" API Redux Toolkit. Появилась<a>возможность кастомизации дефолтных мидлваро</a>в, а также<a>включение редьюсеров в createSlice</a>.</p>
124
<p>С этого момента автор начал "допиливать" API Redux Toolkit. Появилась<a>возможность кастомизации дефолтных мидлваро</a>в, а также<a>включение редьюсеров в createSlice</a>.</p>
125
<p>Было ещё много идей, но<a>автор решил</a>, что их можно реализовать после релиза. После этого официально вышел Redux Toolkit 1.0.</p>
125
<p>Было ещё много идей, но<a>автор решил</a>, что их можно реализовать после релиза. После этого официально вышел Redux Toolkit 1.0.</p>
126
+
<h2>Будущее Redux Toolkit</h2>
126
<h3>Обзор</h3>
127
<h3>Обзор</h3>
127
<p>Оглядываясь на проделанную работу, можно сказать, что создателям удалось выполнить основные запланированные задачи. Redux Toolkit стал инструментом с такими характеристиками и возможностями:</p>
128
<p>Оглядываясь на проделанную работу, можно сказать, что создателям удалось выполнить основные запланированные задачи. Redux Toolkit стал инструментом с такими характеристиками и возможностями:</p>
128
<ul><li>официальный пакет, в котором реализованы лучшие практики;</li>
129
<ul><li>официальный пакет, в котором реализованы лучшие практики;</li>
129
<li>значительно упрощает работу с Redux;</li>
130
<li>значительно упрощает работу с Redux;</li>
130
<li>сохраняет основные принципы Redux;</li>
131
<li>сохраняет основные принципы Redux;</li>
131
<li>стартеркит можно добавить в проект на любой стадии реализации;</li>
132
<li>стартеркит можно добавить в проект на любой стадии реализации;</li>
132
<li>полезный инструмент как для новичков, так и для опытных разработчиков;</li>
133
<li>полезный инструмент как для новичков, так и для опытных разработчиков;</li>
133
<li>поддерживает TypeScript без увеличения сложности разработки.</li>
134
<li>поддерживает TypeScript без увеличения сложности разработки.</li>
134
</ul><p>Автор активно рекламировал Redux Toolkit целый год. Ссылка на этот инструмент появилась на главной странице документации Redux. Также инструмент рекомендуется в разделе документации<a>Configuring Your Store</a>.</p>
135
</ul><p>Автор активно рекламировал Redux Toolkit целый год. Ссылка на этот инструмент появилась на главной странице документации Redux. Также инструмент рекомендуется в разделе документации<a>Configuring Your Store</a>.</p>
135
<p>Судя по<a>статистике загрузки пакета</a>, Redux Toolkit оказался востребованным инструментом. Его устанавливают более 100 тыс. раз в месяц, и график количества загрузок показывает рост. Автор получил много положительных откликов о Redux Toolkit.</p>
136
<p>Судя по<a>статистике загрузки пакета</a>, Redux Toolkit оказался востребованным инструментом. Его устанавливают более 100 тыс. раз в месяц, и график количества загрузок показывает рост. Автор получил много положительных откликов о Redux Toolkit.</p>
136
<h2>Следующие шаги</h2>
137
<h2>Следующие шаги</h2>
137
<p>В настоящее время<a>планируется</a>масштабная работа по модернизации документации Redux. В рамках модернизации будет созданы обучающие материалы по Redux Toolkit. Также информация о стартерките будет добавлена в гайды и туториалы. Пользователи узнают о простых способах работы с Redux, например, об избегании использования констант действия или об<a>использовании утиного паттерна при организации логики</a>. Возможно, в Redux Toolkit добавят<a>возможность определять асинхронные побочные эффекты в слайсах</a>.</p>
138
<p>В настоящее время<a>планируется</a>масштабная работа по модернизации документации Redux. В рамках модернизации будет созданы обучающие материалы по Redux Toolkit. Также информация о стартерките будет добавлена в гайды и туториалы. Пользователи узнают о простых способах работы с Redux, например, об избегании использования констант действия или об<a>использовании утиного паттерна при организации логики</a>. Возможно, в Redux Toolkit добавят<a>возможность определять асинхронные побочные эффекты в слайсах</a>.</p>
138
<p><em>Адаптированный перевод статьи<a>Idiomatic Redux: Redux Toolkit 1.0</a>by Mark Erikson. Мнение администрации "Хекслета" может не совпадать с мнением автора оригинальной публикации.</em></p>
139
<p><em>Адаптированный перевод статьи<a>Idiomatic Redux: Redux Toolkit 1.0</a>by Mark Erikson. Мнение администрации "Хекслета" может не совпадать с мнением автора оригинальной публикации.</em></p>