feat: add cookie article, some style fixes

This commit is contained in:
2025-05-23 15:02:39 +03:00
parent a0e6c5c03c
commit 1a18557ec6
6 changed files with 142 additions and 45 deletions

View File

@@ -94,23 +94,23 @@ function Counter() {
```
## Преимущества Redux:
1. Централизованное состояние:
1. **Централизованное состояние:**
- Всё состояние приложения хранится в одном месте, что упрощает управление и отладку.
2. Предсказуемость:
2. **Предсказуемость:**
- Состояние изменяется только через действия и редьюсеры, что делает поведение приложения предсказуемым.
3. Инструменты разработчика:
3. **Инструменты разработчика:**
- Redux DevTools позволяют отслеживать изменения состояния, отменять действия и многое другое.
4. Масштабируемость:
4. **Масштабируемость:**
- Redux хорошо подходит для больших приложений с множеством компонентов и сложной логикой состояния.
5. Сообщество и экосистема:
5. **Сообщество и экосистема:**
- Redux имеет огромное сообщество и множество дополнительных библиотек (например, Redux Thunk, Redux Saga).
## Недостатки Redux:
1. Boilerplate:
1. **Boilerplate:**
- Redux требует написания большого количества кода (actions, reducers, store), что может быть избыточным для небольших приложений.
2. Сложность:
2. **Сложность:**
- Для новичков Redux может показаться сложным из-за множества концепций и шагов.
3. Производительность:
3. **Производительность:**
- Неправильное использование Redux может привести к лишним ререндерам компонентов.
## Redux Toolkit (RTK):

View File

@@ -22,34 +22,34 @@ sidebar_position: 3
- RTK Query интегрируется с Redux DevTools, что позволяет отслеживать состояние запросов и кэша.
Основные хуки RTK Query:
1. useQuery:
1. **useQuery:**
- Используется для выполнения **GET**-запросов.
- Возвращает объект с данными, состоянием загрузки (`isLoading`), ошибкой (~~error~~) и другими полезными полями.
- Пример: `useGetPostsQuery()`.
2. useMutation:
2. **useMutation:**
- Используется для выполнения **POST**, **PUT**, **DELETE** и других запросов, изменяющих данные на сервере.
- Возвращает функцию для выполнения мутации и объект с состоянием (`isLoading`, `isError` и т.д.).
- Пример: `useAddPostMutation()`.
3. useLazyQuery:
3. **useLazyQuery:**
- Используется для выполнения запросов по требованию (например, при нажатии кнопки).
- Пример: `const [fetchPost, { data }] = useLazyGetPostByIdQuery()`.
## Преимущества RTK Query:
1. Минимум boilerplate-кода:
1. **Минимум boilerplate-кода:**
- RTK Query автоматически генерирует редьюсеры, действия и хуки.
2. Кэширование:
2. **Кэширование:**
- Данные автоматически кэшируются, что предотвращает лишние запросы.
3. Интеграция с Redux:
3. **Интеграция с Redux:**
- RTK Query легко интегрируется с существующим Redux-стором.
4. Оптимизация:
4. **Оптимизация:**
- Автоматическое управление подписками и ререндерами.
5. Поддержка TypeScript:
5. **Поддержка TypeScript:**
- RTK Query полностью поддерживает TypeScript, что делает её удобной для типизированных проектов.
## Недостатки RTK Query:
1. Ограниченная гибкость:
1. **Ограниченная гибкость:**
- RTK Query ориентирована на REST API и GraphQL. Для более сложных сценариев может потребоваться ручная настройка.
2. Зависимость от Redux:
2. **Зависимость от Redux:**
- Если в проекте не используется Redux, RTK Query может быть избыточной.
## Когда использовать RTK Query?

View File

@@ -11,39 +11,39 @@ Zustand — это минималистичная и современная би
## Основные особенности Zustand:
1. Простота:
1. **Простота:**
- Zustand имеет минимальный API, что делает его очень простым в использовании.
- Для начала работы достаточно создать store с помощью функции create.
2. Минимум boilerplate:
2. **Минимум boilerplate:**
- В отличие от Redux, Zustand не требует настройки редьюсеров, действий или middleware.
3. Реактивность:
3. **Реактивность:**
- Zustand автоматически отслеживает изменения состояния и обновляет компоненты, которые используют store.
4. Гибкость:
4. **Гибкость:**
- Zustand позволяет хранить как простые, так и сложные состояния, включая асинхронные операции.
5. Интеграция с React:
5. **Интеграция с React:**
- Zustand предоставляет хуки для удобного использования store в функциональных компонентах.
6. Производительность:
6. **Производительность:**
- Zustand оптимизирован для минимизации лишних ререндеров.
## Преимущества Zustand:
1. Минимализм:
1. **Минимализм:**
- Zustand предоставляет только необходимый функционал, без лишних сложностей.
2. Простота интеграции:
2. **Простота интеграции:**
- Не требуется настройка провайдеров или обёрток, как в Redux.
3. Производительность:
3. **Производительность:**
- Zustand оптимизирован для минимизации ререндеров.
4. Гибкость:
4. **Гибкость:**
- Подходит как для простых, так и для сложных сценариев управления состоянием.
5. TypeScript-поддержка:
5. **TypeScript-поддержка:**
- Zustand полностью поддерживает TypeScript, что делает его удобным для типизированных проектов.
## Недостатки Zustand:
1. Ограничение в инструменте для отладки:
1. **Ограничение в инструменте для отладки:**
- В отличие от Redux, Zustand не имеет таких мощных инструментов, как Redux DevTools, но при этом практически
полностью совместим и может использовать его для отладки.
2. Меньше сообщества:
2. **Меньше сообщества:**
- Zustand менее популярен, чем Redux, поэтому может быть меньше ресурсов и примеров.
## Когда использовать Zustand?