Почему я выбираю Zustand вместо Redux Toolkit?

Сегодня мы сравним 2 решения по управлению State в React приложениях: Zustand и Redux Toolkit. Посмотрим на плюсы и минусы каждого и как они работают.
🔗 Ссылки:
Zustand: zustand-demo.pmnd.rs/
Redux Toolkit: redux-toolkit.js.org
🎓 Курс по React и Redux Toolkit: purpleschool.ru/course/react-...
🎓 Профессия Frontend: purpleschool.ru/profession/fr...
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:13 - Что будем сравнивать?
1:41 - Создание проекта
2:29 - Установка зависимостей
3:02 - State в Redux Toolkit
6:03 - State Zustand
7:36 - Использование Redux Toolkit
10:33 - Запуск проекта
11:05 - Использование Zustand
12:52 - createAsyncThunk
16:09 - Асинхронные Actions
17:14 - Запросы Zustand
19:57 - Отладка Redux Toolkit
20:52 - Отладка Zustand
22:45 - Итоги
24:34 - Заключение
ratingus.ru

[@PurpleSchool]

🔗 Ссылки: Zustand: zustand-demo.pmnd.rs/ Redux Toolkit: redux-toolkit.js.org 🎓 Курс по React и Redux Toolkit: purpleschool.ru/course/react-... 🎓 Профессия Frontend: purpleschool.ru/profession/fr... 💬 Telegram канал с полезными советами: t.me/purple_code_channel

[@Ponevejski]

Антон, добрый день! Спасибо за ваши информативные видео, как всегда очень приятно смотреть. Скажите, есть ли у вас опыт использования Recoil? Достаточно много шумихи вокруг этого state manager, однако я изучив документацию не понял почему он произвел такой фурор, как по мне там слишком мало функционала, не совсем очевидная структура и я бы хотел узнать ваше мнение, был ли опыт использования и тд. Заранее благодарю!

[@PurpleSchool]

Спасибо! Использовал на паре проектов, похож на Zustand

[@viktorkasap]

Спасибо, было полезно! Антон, сделай пожалуйста обзор effector, возможно ты в следующем видео будешь говорить почему ты решил использовать effector вместо zustand 😁

[@PurpleSchool]

Гляну обязательно 😆

[@Santos20004]

спасибо большое за канал и школу. Вопрос : а будет ли что-то по RTK Query ?

[@PurpleSchool]

Возможно сделаю видео

[@Gazovchik]

Ничего себе работа сделана Кроме видео по теме - ещё и так подробно (сам ролик) на таймкоды разбит,,,,,, Всем Адекватности мира и добра, ребята. Успехов в учёбе - тем, кто (как я ) учится.

[@PurpleSchool]

Рад, что понравилось)

[@Gazovchik]

@@PurpleSchool я сам знаю, что такое тяжёлый труд. Поэтому всегда уважаю труд других!

[@romaniksanov8237]

Здравствуйте. Многие рекомендуют использовать zustand с react-query для запросов API. Можете подсказать, насколько это рабочая связка? И показать пример, как это должно вместе работать. Я имею в виду через хук useQuery и useMutation. Или достаточно будет обращаться к серверу способом, который вы показали?

[@PurpleSchool]

Вполне рабочий вариант, который я часто вижу на проектах

[@Dendor3519]

Мы начали так делать. В целом, на начальном этапе классно! Довольно простой код. Возможности есть.

[@pir0zh0kDevTV]

Дружище, спасибо огромное, помог немного проще понять Redux Toolkit😂😂😂 У других не понятно, а тут каак понял, потому что другие заумно его как-то показывают. А во вторых - спасибо в целом за сравнение, наверное перейду с MobX на зустанд. Ну и конечно вопросик, это ты Copilot подключил, что редактор за тебя пол кода сам пишет?

[@PurpleSchool]

Спасибо! Это плагин Codium

[@pir0zh0kDevTV]

@@PurpleSchool а есть на VScode? А то у меня ни NvChad, ни Astrovim не ворк

[@PurpleSchool]

@@pir0zh0kDevTV думаю, что есть

[@andrTaylor]

Видео полезное, спасибо, но есть вопрос - а что делать, если в проекте используется zustand и модульная архитектура, где у каждого компонента свой децентрализованный стор, НО внезапно в каком-то одном компоненте понадобилось значение из другого? То есть в redux это делается легко через useSelector, ведь стейт централизован, а как сделать такое же поведение в zustand или как вообще в такой ситуации быть?

[@PurpleSchool]

Ты можешь его получить: github.com/pmndrs/zustand/discussions/630

[@user-uw9xp8en3v]

Анти паттерн. Не надо такого допускать. ИМХО. Поэтому не использую глобальные стейт-менеджеры. Зачем для каждого компонента отдельный стор на zustand-е, чем не устроил useState?

[@arturseu]

​@@user-uw9xp8en3vне для каждого компонента. Никто тебя не запрещает иметь внутреннее состояние. Приведу пример drawer. Зачем импортить компонент в местах где он необходим каждый раз. У тебя могут быть много уникальных кейсов. Юзая глобальный стэйт тебе нужна только функция для взаимодействия. Все. Контекст не поможет потому что ты будет эффектить все компоненты и ререндерить их.

[@pvttrix]

Произносится Цуштанд. Это немецкое слово , переводится как «состояние». А видео крутое)

[@PurpleSchool]

Спасибо

[@knowledgedose1956]

добавлю, произносится "вит" а не "вайт", это прям в доке указано, французское слово

[@predok_mif]

Не разобраны мидлвары редакса (+ у RTK еще есть энхэнсеры). За счет централизации, мидлвары дают огромные возможности управления и позволяют строить цепочки зависимых эвентов. Например, когда отправляются 3 запроса с небольшим промежутком (например поиск при наборе текста), и каждый последующий запрос отменяет предыдущий начатый, чтоб небыло "гонки" запросов. В Зустанде этот кейс освещен небыл. Логирование/отладка не надежная из за обязательных параметров в set, что сводит доверие к ней в ноль, а доверие к инструменту отладки - критично-важная штука. Не освещена проблема типизации TS. У RTK в продакшене - это настоящая боль, если делать все правильно... либо any везде и на кой тогда TS нужен - не понятно

[@PurpleSchool]

Спасибо за дополнение. В видео сложно охватить все аспекты

[@un_defined]

ну кстати спотыкался и на зу с этим. оч скудная дока по тс если не туду делать

[@vladislav.filipov]

Подскажи ещё кейсы с использованием мидлваров в редаксе? Мне для расширения кругозора если что, а не докопаться) Просто гонку запросов при поиске решаю простым кастомным хуком (в реакте, но думаю речь итак о нем) с таймером. По поводу типов, у нас используется генератор методов с типами по опенапи схеме, потрясающая вещь) Ни без подводных, но однозначно спасение, вручную столько типов писать (и главное поддерживать) с ума сойти можно...

[@FoldyH3ro]

​​@@vladislav.filipov Не уверен, что кейс подходит под описание "гонки запросов". Когда страница загружается, необходимо отослать запросов 5 для получения всей информации. На первом запросе фронтэнд понимает, что токен авторизации истек. Чтобы остальные 4 запроса не отослались в молоко, мы блокируем поток запросов через mutex, перезапрашиваем токен с сервера, повторно делаем 1 запрос, и анлочим поток, делая оставшиеся 4 запроса. Ситуация с моего крайнего проекта) upd: Все запросы естественно делаются через Rtk query

[@predok_mif]

@@vladislav.filipov начнем с того, что вся асинхронщина в редакс - это мидлвары, даже те-же thunk'и - это мидлвара (выполняется в мидлваре), хоть и выглядит как экшен, который диспатчат. Еще есть батчеры экшенов, когда экшенов слишком много и нужно их накапливать в течении короткого промежутка времени и разом пропускать дальше, чтоб уменьшить количество ререндеров. Логгер - мидлвара. Есть мидлвары, которые связаны с history и можно прям из экшена делать редирект. Много их, но чаще нужно какие-то специфические триггеры экшенов нужны.

[@user-wp5pc1py9g]

Интересненько

[@PurpleSchool]

Спасибо

[@SGWebDeveloper]

Подскажите люди добрые как реализовать такие подсказки продолжения кода в VS Code ?

[@miroslavwise9276]

скорее всего, это Capilot, он уже платный стал

[@PurpleSchool]

Это Codium и он бесплатен

[@dencheechoo3681]

или Codeium@@PurpleSchool Потому что Codium я поставил вроде как бесплатно только временно далее просит купить подписку

[@PurpleSchool]

@@dencheechoo3681 👍

[@moon.trance]

Давайте теперь сравнение с Pinia, чтобы любители редукса офигели от магии.

[@sharkman6434]

А давайте вы возмете проект скажем на пару тройку лямов долларов, команду и запилите на вью и пинье срм систему например для банка, потом, через пару лет когда и если закончите проект и успешно запустите, снимите видео как не обосрались с вашей пиньей и вью и тогда мы все выкинем реакт в помойку и тоже пиньи будем юзать , а то балакать вебки за 5к и проекты крупные это как бы, вроде, разные весчи ))

[@user-lr8ww4kk6n]

Ну zustand на самом деле близок к ананасу. Ну конечно да, на хватает вычисляемых свойств, но все же их по идее тоже можно делать

[@moon.trance]

@@sharkman6434 а давайте не натягивать сову на глобус. На видео показывают каунтер из доки, и выглядит этот каунтер раз в 10 лучше на Pinia.

[@aweb_21]

@@sharkman6434 гитлаб на сколько лямов потянет ? Или озон ?

[@adamburke4496]

​@@sharkman6434а в чем проблема Vue для разработки больших и сложных проектов? Несколько раз слышал об этом, но никаких пруфов не видел.

[@user-mh9pe4zp6l]

А что думаете насчёт effector?

[@PurpleSchool]

Не пробовал на проде

[@frusen_sol]

Было бы интресно посмотреть про preact-signals

[@PurpleSchool]

Может сделаю видео

[@andyjs666]

Когда он появился, я его тут же затащил на проект (Next). Но увы. Он сломал HMR, и пришлось отказаться от него в пользу Valtio

[@io0312]

Какую нейросеть вы используете для работы с кодом ?

[@PurpleSchool]

Codeium

[@deGGenerate]

Воу воу воу на холивар нарываетесь молодой человек

[@PurpleSchool]

Ну не очень я уже и молодой...

[@user-kr6lp7rm5y]

Хотелось бы увидеть видео про Reatom, а то есть видео только от создателя. Интересен взгляд со стороны

[@PurpleSchool]

Возможно посмотрю)

[@dmitry9463]

Почему децентрализованный стор это преимущество?

[@AleksandrChernovIT]

О, теперь экшены именнованные в девтулс для Зустанда?

[@PurpleSchool]

Их можно назвать, да

[@MfeaR113]

Потестил, немного отличается от RTK с точки зрения рендеринга. Если у нас есть много переменных в рамках одного store в разных компонентах то для то что бы обновлять только конкретные мы должны подписаться на конкретное значение, count = useZustandState((state) => state.count), по аналогии с RTK. Но! В отличии от Redux это же нужно сделать и для экшенов. То есть const increment = ((state) => state.increment) const decrement = ((state) => state.decrement) Если этого не сделать, то даже тот компонент, в котором используются только экшены (кнопка) будет тоже перерисовываться

[@user-sj7tf2yv3m]

Наш вариант pinia❤

[@maximkutprot7374]

Zustand для управления локального стейта подходит в связке c TanStack Query - идеально

[@arturseu]

можешь объяснить пожалуйста в чем преимущество? Что в одном что в другом случае ты кэшируешь данные, только useQuery дает из коробки много фишек для работы с ним.

[@maximkutprot7374]

TanStack Query для получения данных из вне(управление асинхронным состоянием). Zustand для управления локального состояния (например фильтрация), его значение можно использовать в качестве параметра в TanStack Query.

[@user-rs9ht1ue4v]

Было бы интересно посмотреть видео про Effector, а может даже и про его экосистему. Мало роликов на ютубе по данной технологии

[@PurpleSchool]

Может быть сделаю

[@despondency4847]

Почему существует 100500 стейт менеджеров?

[@proletarian]

@@despondency4847 потому что каждый знает как лучше

[@proletarian]

@@despondency4847 к примеру тащить RTK в какой то маленький проект как то не целесообразно

[@despondency4847]

@@proletarian почему у вью один основной стейт менеджер (был vuex, для composition стал pinia), который прекрасно подходит, а у реакта их 200? опустим то, что некоторые из них можно юзать и с вью тоже (хз зачем)

[@biLLie_wiLLie]

В такие моменты я люблю vue - никакого выбора, есть только pinia)) пока реакт разработчики ломают голову что лучше, vue разрабы кайфуют)

[@user-lr8ww4kk6n]

А как же VueX?) Redux для vue вроде тоже есть. да и mobx вроде существует

[@biLLie_wiLLie]

@@user-lr8ww4kk6n если бы ты знал, что такое pinia, то не упоминал бы veux )))

[@nvdedmz]

Увы но это не так

[@chudickgumanoid]

​@@user-lr8ww4kk6n vuex это и есть тот редакс от которого все уходят постепенно, пинья мега топорная и понятная, думать не надо, просто пиши код и используй.

[@user-uw9xp8en3v]

Ну во-первых, а в чем вопрос вообще? Сначала надо ответить на вопрос: "Зачем мне стейт-менкджер? Какие задачи он поможет мне решить лучше, чем встроенный useState"

[@AlexGabber]

Отличный разбор, но жаль, что не рассматривается способ как при сборке девтулз выкинуть)

[@PurpleSchool]

Спасибо

[@01slon]

Не совсем понял, почему автор не рассматривает RTK-QUERY? Он вроде как из коробки идет, ничего дополнительного не нужно устанавливать.

[@PurpleSchool]

Отдельно по нему сделаю разбор. Просто его правильно сравнивать с React Query.

[@01slon]

@@PurpleSchool хм, ну я считаю, что это не верный вывод. Это одна зависимость и я не понимаю, почему нужно игнорировать часть её возможностей. Вы оцениваете плюсы и минусы, так, на мой взгляд это плюс, который говорит в пользу редакс. У zustand, как я понял, нет такого функционала, даже близко. Так в чем преимущественно его перед редаксом? Что при инициализации нужно писать один раз меньше кода? А потом ещё нужно будет устанавливать другие зависимости, что бы делать запросы на сервер по человечески? Ну честно говоря, всё это говорит о преимуществах как раз редакса. Лично я, уж как-нибудь переживу, что один раз нужно будет написать немного больше кода.

[@knowledgedose1956]

​@@01slonя бы сказал что react query удобней rtk query, и да это отдельная зависимость, ничего страшного в этом нет

[@01slon]

@@knowledgedose1956 ну скорей всего вы и правы, но я бы хотел пояснить, представьте себе, что мы сравниваем две машины. Одна крутая, быстрая, а вторая не такая крутая и не такая быстрая, но она еще и летать умеет. И автор предлагает не принимать во внимание, что машина умеет летать, а делает выводы, что машина стремная, потому что она медленной чем другие. Но она нифига не стремная, она же ещё летает. Может она летает не так круто как самолёт, но другие машины вообще не умеют летать. Не знаю, может сложный пример я выбрал)))))

[@user-uw9xp8en3v]

​@@PurpleSchool согласен!

[@user-ci6pr6oy6q]

тема раскрыта не до конца как по мне, как обрабатывать состояния panding, fulfilled, как отлавливать ошибки на эндпоинтах. с RTK так же можно сделать отдельный слой в хуке где собрать все и отдать что нужно. А что там много болера позволяет очень гибко добавлять абстракции на нужных уровнях в зустанде это все приходится описывать в fetch функциях полагаю. Пока явного превосходства не видно как по мне

[@PurpleSchool]

Для этого заводится состояние загрузки и ошибки в State.

[@despondency4847]

​@@PurpleSchoolне излишний ли это бойлерплейт код?

[@BugaevEvgeny]

если на проекте появляется апи больше чем один запрос, то тулкит + ртк (квери) выглядит перспективней, так как в 2023 году самому писать фетчер и состояния ошибки в Стейт очень лень.

[@vladislav.filipov]

​@@despondency4847в РТК оно тоже само по себе не проставится)

[@vladislav.filipov]

​@@BugaevEvgenyты случайно не про rtk query говоришь?

[@sergeygolovkov7899]

Mobx one love

[@aweb_21]

Немного хейта, если позволишь, по поводу произношения) Первую часть ты произносишь как бы на Английском, зу, а вторую часть на немецком штанд. Вопрос: зачему ? 😁 Ведь это немецкое слово цуштанд(состояние). Это тоже как если произносить французское vite - вайт, вместо вит. Без негатива, просто хотелось что-то написать, а тут такой повод 😁 С уважением к Антону!

[@PurpleSchool]

Как и сказал в видео, так произношу)

[@abbze8272]

Ааа, вот почему так странно звучит в видео. Это на самом деле цуштанд))

[@Roger-qj4wu]

От создателей кА эс эс. А вообще никогда не понимал людей которым лень разобраться с правильным произношением. Со стороны это выглядит как бабка которая кричит что ей не "нужон ынтырнет"

[@user-jh1vo3hh1h]

что за браузер на видео?

[@PurpleSchool]

Arc Browser. У меня есть про него видео

[@boyywnkobe]

Pls make comparison your editor vs vscode

[@PurpleSchool]

👍

[@Moonlization]

По-немецки цуштанд это состояние. Возможно так и следует его называть

[@dmitryts9093]

И в чем смысл видео? Почему выбор в пользу зустанда? посмотрел всё видео и редакс выглядит лучше, при том что это простой пример + ко всему автор не добавил типизацию и селекторы, и говорит что стору нужно давать тип Выбрали зустанд потому что меньше строчек кода? а то что в проектах по больше примера, зустанд в свалку превращается не сказал. В итоге вкусовщина

[@MeggErastian]

Жаль не рассказал что зустанд по дефолту хранит данные в локалСторэдже)))

[@PurpleSchool]

Нет, только если ему подключить Persist Middleware

[@user-ux4le1tf3y]

Я тоже перешел на zustand

[@PurpleSchool]

👍

[@proletarian]

Учу немецкий, и потому зуштанд делает больно моим ушам😅 Z это "цэт" )

[@PurpleSchool]

😅

[@nvdedmz]

А надо было effector

[@vadikpanchuk4978]

Посмотрел. Если у вас в коде компоненты фигурирует dispatch, то вы знаете об возможностях rtk примерно как большинство разработчиков про JS.

[@user-dp6yt7yc9l]

Лол, во ты приколист))) RTK query рассматривать не будем))) Я редакс в принципе использую только из-за RTK query, без него лучше что-то другое использовать. RTK query поддерживает кодсплиттинг (он децентрализован), я думаю можно и слайсы при желании «децентриализовать». В редаксе провайдер нужен что бы поддерживать изоморфизм, как зустанд с SSR работает? «Мало лишнего кода» лол, это помимо стора еще нужно все экшены в интерфейс добавлять, в редаксе экшены автоматом типизируются (ну почти). А асинхронные экшены вообще не нужны с RTK query. Если делать по уму, то и стор в принципе не нужен (всмысле слайсы), RTK query закрывает все потребности. Если пофиг на изоморфизм, хочется как можно меньше бойлерплейта и самый децентрализованный стор, то watch-state в помощь, там есть @watch-state/async и @watch-state/api (эта штука шарит состояние между вкладками, такой фичи вообще ни у кого нет) для асинхонщины.

[@golden_smiles]

Поддерживаю данного оратора не токмо лайком, но и данным комментом.

[@predok_mif]

Я в свое время слез с редакса на RTK из за immutablejs, а RTK query так и не раскурил, ИМХО это большой оверхед. Децентрализованым RTK вроде сделать можно, и даже слайсы на лету добавлять-удалять (в редаксе я так делал), но только если нет мидлвар с собственным состоянием (saga - самый яркий пример). А т.к. без мидлвар оно никогда не применяется - не выйдет ((

[@indigosay]

А если сравнить RTK Query и Tantask React Query? Какой вывод?

[@rustamakhmetyanov4404]

я примерно понял вас, но на практике не представляю не подскажите где можно на код такой посмотреть. я только постигаю в rtk. с чистым редакс не работал

[@predok_mif]

@@rustamakhmetyanov4404 Я искренне рекоммендую сделать хотя бы один проект на чистом редаксе для понимания внутрянки, тогда RTK будет сильно понятней. Только без TS, а то у редакса с ним не сложно, но гемора дико много, чтоб все сделать "правильно"

[@user-qx6ru7jc7x]

Это ещё бл что такое??? Опять что-то нужно учить?! Да ёмаёё....

[@PurpleSchool]

Ха-ха-ха)

[@miloman1995s]

блин цуштант звучит ужасно - хоть и типо правильно, как на немецком... зустанд - звучит круче

[@seryozhamangushev9638]

Этот Жуштенд ужасен, please так же подробно effector, он бомба!

[@JJohnson-fy9uz]

MobX - лучший инструмент для управления состоянием. А вот на zustand и ему подобных только to-do листы писать =)

[@PurpleSchool]

Почему?

[@user-zi4gy8nk6d]

Странно что статистика npm говорит о другом 😂

[@JJohnson-fy9uz]

@@PurpleSchool Большие проекты обычно на RTK или MobX, на Zustand не видел

[@JJohnson-fy9uz]

@@user-zi4gy8nk6d Действительно, тысячи мух не могут ошибаться =) Это как с create-react-app, который первый по деплоям на Netlify

[@un_defined]

@@JJohnson-fy9uz так и годиков сколько ему

[@vovka_goodwin]

О нет, это же очередной убийца Редакса xD На самом деле было бы очень интересно узнать как он себя поведёт на +- крупном проекте когда сторов будет не один десяток. Имхо - есть какая то точка невозврата, когда рулить этим всем станет сильно сложнее чем пресловутым бойлер плейтом редакса) Не спорю, что если пишется приложение с парой-тройкой страниц, то такой стейт менеджер будет закрывать все потребности, а редакс окажется избыточным

[@user-yw9wx4lv2w]

так мультисторы как раз лучше мастабируются чем один огромный стор на все. Так как апдейты всегда атомарные без лишней мемоизации

[@user-uw9xp8en3v]

Вот придумываете себе проблем Инструментом надо уметь пользоваться. By default в 95% случаев, если не больше, вам ни redux, ни zustand не нужны

[@andrei-psyhelp]

Выбирать надо эффектор

[@PurpleSchool]

Почему?)

[@dumkiAndrusja]

reatom )

[@clermontvv]

Ни ssr, ни нормальных тестов (рассказ про мокинг в доке это полный треш), даже в компьютеды не умеет эта поделка - одним словом зустанд. Шляпа, распиаренная в твиттере, которая может только автоматически хук генерить. Ну и как же get/set, лучшее апи на свете. В нем просто ничего нет от слова совсем))) Спрашивается - зачем его брать на фоне существования других стм?

[@PurpleSchool]

Zustand отлично работает с SSR и Next.

[@clermontvv]

@@PurpleSchool Я хочу на сервере нафетчить данные, засунуть их в сторы, отрендерить страницу, зашить сериализованные данные сторов в верстку, отправить верстку на клиент, десериализовать и положить их в сторы как мне это сделать с зустандом?

[@golden_smiles]

@@PurpleSchool SSR и Next... Вот она, настоящая причина. Ежики продолжали колоться и кушать кактусы. Жаль, надо было сделать упор на это в видео, сравнили бы как оно летает с SSR там и здесь.

[@dumkiAndrusja]

цуштант)

[@Dendor3519]

А ещё zustand быстрее.

[@fedordostoevskiy4209]

Студенты чего? Zustand?

[@PurpleSchool]

purpleschool.ru/

[@thats_embarrassing_JS]

Mobx - наше всё.

[@slavapol-v1553]

Mobx и reatom самые классные, у Mobx так вообще самый чистейший код, zustand в сравнении с ним какая то поделка.

[@ilguciems]

Цуштанд

[@diamondmedia3076]

Цуштанд. Немецкий язык.

[@NonameDiablo]

Редакс это дерьмо.

[@ArthurMudrick]

10:25 парень всё видео отчаянно пытается заставлять себя произносить слово Zustand на немецкий манер - зуштант, но постоянно срывается на русское произношение - зустанд, зачем себя так мучать, ахах? Если ты говориш по-немецки с немецкоговорящими, то и произноси «зуштант» (прям аж с немецким говором), но здесь ты разговариваешь по-русски с русскоговорящей аудиторией, ну так и произноси слова на русский манер, зустанд, это нормально, разговаривая по-русски говорить на русский манер, с русской интонацией. Если какой-то бренд придумали в Германии, это не значит, что его нужно произносить на немецкий манер с немецкой интонацией, ты же японские бренды не произносишь на японский манер с японской интонацией, разговаривая по-русски с русскоговорящими, ахах.

[@alexdubkov6998]

Ну бутерброт как то выучили и рюкзак. И цуштанд тоже несложно.