feat: add cookie article, some style fixes
This commit is contained in:
@@ -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):
|
||||
|
||||
@@ -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?
|
||||
|
||||
@@ -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?
|
||||
|
||||
Reference in New Issue
Block a user