NextJS + Управление состоянием = Хорошая идея???

• Next.js выполняет выборку данных и отправку их компонентам.  

• Вопрос: нужен ли менеджер состояний в Next.js?  

• Видео сравнивает 20 менеджеров состояний и предлагает методологию выбора.  

• Видео объединяет темы Next.js и управление состоянием.  

• Планируется предоставить репозиторий с примерами различных методологий.  

• Рассматриваются однонаправленное управление состоянием с Redux, двунаправленное управление состоянием с MobX, атомарное управление состоянием с Joi и реактивное управление состоянием с RxJS.  

• Приложение одностраничное, с одним маршрутом и рендерингом на стороне сервера.  

• Пример с покемонами: отображение 20 покемонов и фильтрация на стороне клиента.  

• Проблема: данные загружаются на стороне сервера, но не возвращаются клиенту.  

• Создание каталога для Next.js state management.  

• Создание приложения с использованием useState.  

• Настройка проекта и запуск yarn dev.  

• Преобразование в TypeScript и определение покемонов.  

• Получение данных из сервиса и их отображение.  

• Добавление стилей и разметка для отображения покемонов.  

• Определение состояния для фильтра.  

• Добавление текстового поля для фильтра и установка фильтра при изменении.  

• Применение фильтра к набору данных с использованием useMemo.  

• Создание контекста для повторного использования данных.  

• Перенос кода в хранилище и создание пользовательского крючка.  

• Создание контекста для покемонов с использованием usePokemonController.  

• Создание компонента провайдера для обертывания приложения.  

• Использование функционального компонента React и контекстного провайдера.  

• Экспорт функции use для фильтрации и выбора покемонов.  

• Подключение провайдера покемонов к приложению.  

• Обертывание каждой страницы в провайдера.  

• Получение списка покемонов с серверных реквизитов.  

• Импорт и использование серверных реквизитов из магазина.  

• Фильтрация покемонов с помощью хука.  

• Проверка работы приложения на стороне сервера и клиента.  

• Введение в React Query и его использование.  

• Создание функции для получения покемонов.  

• Настройка сборщика и выполнение запроса.  

• Настройка повторной выборки для предотвращения ненужных запросов.  

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

• Введение предварительной выборки и гидратации в React Query.  

• Преобразование состояния из предварительной выборки в состояние приложения.  

• Проверка работы приложения с предварительной выборкой.  

• Переход к использованию Redux для управления состоянием.  

• Демонстрация готовой версии Redux для демонстрации.  

• Обзор репозитория на GitHub с исходными текстами для Redux.  

• Описание состояния магазина: покемон, строка поиска, отфильтрованный покемон, состояние ожидания или ошибки.  

• Настройка начального состояния хранилища и асинхронного сигнала для получения покемонов.  

• Создание магазина и извлечение элементов: диспетчер, действия, средства выбора.  

• Запуск асинхронного запроса на стороне сервера и передача начального состояния компоненту страницы.  

• Применение действия регидратации для обновления состояния на клиенте.  

• Введение в Zustand и создание пользовательского хука для однонаправленного потока данных.  

• Реализация фильтра покемонов и установка фильтра.  

• Использование хука на стороне сервера и клиента для управления состоянием.  

• Введение в MobX и создание класса магазина покемонов.  

• Описание наблюдаемых свойств и производного значения отфильтрованного покемона.  

• Настройка магазина и использование наблюдателя для обновления компонентов при изменении состояния.  

• Обсуждение интерактивности и установки фильтров.  

• MobX позволяет структурировать действия и требовать выполнения определенных вещей.  

• MobX совместим с рендерингом на стороне сервера и созданием статических сайтов.  

• Joy - атомарный менеджер состояний.  

• RxJS - менеджер состояний, основанный на событиях.  

• Начало работы с Joy и создание атома для данных.  

• Создание атома для данных и его гидратация.  

• Пример использования атома для фильтрации данных.  

• Преимущества Joy в зависимости атомов друг от друга.  

• Установка фильтра на основе атома.  

• Динамическое обновление отфильтрованных данных.  

• Преимущества атомарной модели в Next.js.  

• RxJS как система, управляемая событиями.  

• Создание объектов поведения для данных.  

• Использование useEffect для инициализации потоков данных.  

• Библиотека observable hooks для работы с потоками.  

• Пример использования use observable state.  

• Преимущества модели управления состоянием на основе событий.  

• Использование данных из серверного реквизита без интерактивности.  

• Применение состояния, useEffect и react query для интерактивности.  

• Выбор архитектуры в стиле однонаправленных данных или atomic для сложных случаев.  

• Важность минимизации глобальных данных в Next.js.  

• Рекомендации по использованию библиотек для управления состоянием.  

• Призыв к подписке и оставлению комментариев.