Подробно изучаем Zustand State Management (React, TypeScript)

• Елена Литвинова представляет урок по изучению библиотеки Suspense.  

• В уроке будет рассмотрена документация на GitHub, подводные камни и способы использования библиотеки.  

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

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

• Приложение будет запущено на локальном хосте 3000.  

• Приложение представляет собой React-приложение с задачами и функциями для их редактирования и выполнения.  

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

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

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

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

• В проекте используются методы для создания, обновления и удаления задач.  

• Пример использования: создание фейковой задачи для тестирования.  

• React отображает данные, а Redux хранит состояние приложения.  

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

• Redux используется для сохранения базовых данных, таких как пользователи и задачи.  

• Suspense — это быстро масштабируемая библиотека для управления состоянием.  

• Для установки библиотеки используется npm install suspense.  

• Для использования библиотеки нужно импортировать метод create и передать callback с параметрами set и get.  

• Callback позволяет устанавливать новое состояние.  

• Метод get возвращает текущее состояние.  

• Пример использования callback и get для управления состоянием.  

• Создание и экспорт store для хранения данных.  

• Методы для работы с задачами: создание, обновление, удаление.  

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

• Методы для работы с задачами и выполненными задачами.  

• Пример создания и добавления задачи.  

• Изменение состояния при добавлении новой задачи.  

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

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

• Автоматическое обновление компонентов при изменении состояния.  

• Использование useStore для работы с состоянием.  

• Пример вызова useStore и получения данных.  

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

• Объяснение работы с изменениями состояния.  

• Пример использования select и move для обнаружения изменений.  

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

• Проверка изменений состояния в компонентах.  

• Пример проверки изменений в разных компонентах.  

• Рекомендации по использованию immutable data.  

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

• Пример сравнения состояний с помощью JSON.stringify.  

• Преимущества и недостатки использования JSON.stringify.  

• Аргумент setState с функцией для полной замены состояния.  

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

• Пример с кнопкой, которая вызывает метод, и его последствия.  

• Добавление функции для обработки действий.  

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

• Пример подписки на изменения состояния и их обработка.  

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

• Пример подписки на изменения статуса торта.  

• Использование middleware для более точной подписки на изменения.  

• Использование служб без React для получения состояния.  

• Преимущества и недостатки использования служб без React.  

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

• Можно использовать sap скребок для обновления элементов.  

• Компонента не рендерится при использовании этого метода.  

• Использование sap скребок для обновления из рефа.  

• Рекомендуется избегать создания глубоких вложенных объектов.  

• Использование библиотечки для изменения вложенных объектов.  

• Пример изменения вложенного объекта с помощью библиотечки.  

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

• Пример создания middleware для local storage.  

• Переписывание функций set, get и api для middleware.  

• Пример создания middleware для local storage.  

• Перезапись функций set и get для middleware.  

• Проверка работы middleware при перезагрузке приложения.  

• Persist middleware позволяет сохранять данные в разных хранилищах.  

• Пример использования persist middleware для сохранения данных в local storage.  

• Возможность использования других хранилищ, таких как npm i.  

• Использование Redux Toolkit для работы с Redux.  

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

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

• Пример работы с Redux и Redux Toolkit.  

• Установка и настройка Redux Toolkit в Google Chrome.  

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

• Пример работы с Redux и Redux Toolkit.  

• Настройка и использование Redux Toolkit.  

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

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

• В React контекст используется для инициализации store и передачи данных.  

• Контекст помогает в server-side рендеринге и перезаписи значений.  

• Создание оберток для упрощения передачи функций между компонентами.  

• Обертки позволяют избежать дублирования кода и упрощают работу.  

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

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

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

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

• Подведение итогов создания оберток для упрощения кода.  

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

• Прощание с зрителями.