update state, api, arch
This commit is contained in:
@@ -2,4 +2,35 @@
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Зачем нужны state менеджеры
|
||||
# Зачем нужны state менеджеры
|
||||
Источник: DeepSeek
|
||||
|
||||
**State Managers** (менеджеры состояния) в контексте React — это инструменты или библиотеки, которые помогают управлять состоянием приложения. В React состояние (state) — это данные, которые определяют, как компонент должен отображаться и вести себя. Однако, когда приложение становится сложным, управление состоянием только с помощью встроенного `useState` или `useReducer` может стать трудным. Здесь на помощь приходят **state managers**.
|
||||
|
||||
## Зачем нужны state managers?
|
||||
1. **Централизованное управление состоянием:** State managers позволяют хранить состояние в одном месте (store), что упрощает его управление и отладку.
|
||||
2. **Повторное использование состояния:** Состояние может быть легко доступно в разных компонентах без необходимости передавать его через пропсы (props drilling).
|
||||
3. **Предсказуемость:** State managers часто используют строгие правила для обновления состояния, что делает поведение приложения более предсказуемым.
|
||||
4. **Инструменты для отладки:** Многие state managers предоставляют инструменты для отслеживания изменений состояния (например, Redux DevTools).
|
||||
|
||||
Популярные state managers для React:
|
||||
1. **Redux:**
|
||||
- Самый популярный state manager.
|
||||
- Использует концепцию _единого хранилища_ (store) и _чистых функций_ (reducers) для обновления состояния.
|
||||
- Подходит для больших приложений.
|
||||
2. **Context API:**
|
||||
- Встроенное решение React для управления состоянием.
|
||||
- Подходит для небольших приложений или случаев, когда не нужен полноценный state manager.
|
||||
3. **Zustand:**
|
||||
- Минималистичный state manager.
|
||||
- Прост в использовании и не требует большого количества boilerplate-кода.
|
||||
4. **MobX:**
|
||||
- Использует observable-объекты для автоматического отслеживания изменений.
|
||||
- Более прост в использовании, чем Redux.
|
||||
|
||||
## Когда использовать state managers?
|
||||
- Если приложение небольшое, можно обойтись встроенными средствами React (useState, useReducer, Context API).
|
||||
- Если приложение большое и сложное, с множеством компонентов, которые зависят от общего состояния, лучше использовать специализированные state managers (Redux, MobX, Recoil и т.д.).
|
||||
|
||||
## Выбор state manager
|
||||
Выбор зависит от сложности приложения, предпочтений команды и необходимости в дополнительных функциях (например, middleware в Redux). Для небольших проектов часто достаточно Context API или Zustand, а для крупных — Redux или Recoil.
|
||||
@@ -2,4 +2,152 @@
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Экосистема Redux
|
||||
# Экосистема Redux
|
||||
|
||||
Redux — это популярный менеджер состояний (state management library) для JavaScript-приложений, включая React. Он предоставляет централизованное хранилище (store) для управления состоянием всего приложения, что делает его особенно полезным для больших и сложных приложений.
|
||||
|
||||
## Основные концепции Redux:
|
||||
1. **Store (хранилище):**
|
||||
- Единый источник истины (_single source of truth_) для состояния всего приложения.
|
||||
- Хранит всё состояние приложения в виде одного большого объекта.
|
||||
- Создаётся с помощью функции `createStore` (в классическом Redux) или `configureStore` (в Redux Toolkit).
|
||||
2. **State (состояние):**
|
||||
- Это данные, которые хранятся в **store**.
|
||||
- State доступен только для чтения. Чтобы изменить **state**, нужно отправить **action**.
|
||||
3. **Actions (действия):**
|
||||
- Это объекты, которые описывают, что должно произойти.
|
||||
- Действия должны иметь поле `type`, которое указывает на тип действия, и могут содержать дополнительные данные (**payload**).
|
||||
```js
|
||||
const increment = () => ({
|
||||
type: 'INCREMENT',
|
||||
});
|
||||
|
||||
const addTodo = (text) => ({
|
||||
type: 'ADD_TODO',
|
||||
payload: text,
|
||||
});
|
||||
```
|
||||
4. **Reducers (редьюсеры):**
|
||||
- Это чистые функции, которые определяют, как состояние (**state**) изменяется в ответ на действия (**actions**).
|
||||
- Редьюсер принимает текущее состояние и действие, а затем возвращает новое состояние.
|
||||
```js
|
||||
const initialState = { count: 0 };
|
||||
|
||||
function counterReducer(state = initialState, action) {
|
||||
switch (action.type) {
|
||||
case 'INCREMENT':
|
||||
return { ...state, count: state.count + 1 };
|
||||
case 'DECREMENT':
|
||||
return { ...state, count: state.count - 1 };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
```
|
||||
5. **Dispatch (диспетчеризация):**
|
||||
- Это метод **store**, который используется для отправки действий (**actions**) в редьюсер.
|
||||
```js
|
||||
store.dispatch({ type: 'INCREMENT' });
|
||||
```
|
||||
6. **Subscribe (подписка):**
|
||||
- Это метод **store**, который позволяет подписаться на изменения состояния.
|
||||
```js
|
||||
store.subscribe(() => {
|
||||
console.log('State changed:', store.getState());
|
||||
});
|
||||
```
|
||||
|
||||
## Как Redux работает с React?
|
||||
Для интеграции Redux с React используется библиотека react-redux, которая предоставляет два основных инструмента:
|
||||
|
||||
1. Provider:
|
||||
- Компонент, который делает store доступным для всех компонентов приложения.
|
||||
```jsx
|
||||
import { Provider } from 'react-redux';
|
||||
import store from './store';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<MyComponent />
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
```
|
||||
2. Hooks:
|
||||
- useSelector: Позволяет компоненту получать данные из store.
|
||||
- useDispatch: Позволяет компоненту отправлять действия (actions).
|
||||
```jsx
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
|
||||
function Counter() {
|
||||
const count = useSelector((state) => state.count);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>Count: {count}</p>
|
||||
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Преимущества Redux:
|
||||
1. Централизованное состояние:
|
||||
- Всё состояние приложения хранится в одном месте, что упрощает управление и отладку.
|
||||
2. Предсказуемость:
|
||||
- Состояние изменяется только через действия и редьюсеры, что делает поведение приложения предсказуемым.
|
||||
3. Инструменты разработчика:
|
||||
- Redux DevTools позволяют отслеживать изменения состояния, отменять действия и многое другое.
|
||||
4. Масштабируемость:
|
||||
- Redux хорошо подходит для больших приложений с множеством компонентов и сложной логикой состояния.
|
||||
5. Сообщество и экосистема:
|
||||
- Redux имеет огромное сообщество и множество дополнительных библиотек (например, Redux Thunk, Redux Saga).
|
||||
|
||||
## Недостатки Redux:
|
||||
1. Boilerplate:
|
||||
- Redux требует написания большого количества кода (actions, reducers, store), что может быть избыточным для небольших приложений.
|
||||
2. Сложность:
|
||||
- Для новичков Redux может показаться сложным из-за множества концепций и шагов.
|
||||
3. Производительность:
|
||||
- Неправильное использование Redux может привести к лишним ререндерам компонентов.
|
||||
|
||||
## Redux Toolkit (RTK):
|
||||
Чтобы упростить работу с Redux, команда разработчиков создала **Redux Toolkit** — официальный набор инструментов для Redux. Он включает:
|
||||
|
||||
- **configureStore:** Упрощает создание **store**.
|
||||
- **createSlice:** Позволяет объединить **actions** и **reducers** в одном месте.
|
||||
- **createAsyncThunk:** Упрощает работу с асинхронными действиями.
|
||||
- Встроенную поддержку Redux **DevTools** и **middleware** (например, Thunk).
|
||||
|
||||
Пример с Redux Toolkit:
|
||||
```js
|
||||
import { createSlice, configureStore } from '@reduxjs/toolkit';
|
||||
|
||||
const counterSlice = createSlice({
|
||||
name: 'counter',
|
||||
initialState: { value: 0 },
|
||||
reducers: {
|
||||
increment: (state) => {
|
||||
state.value += 1;
|
||||
},
|
||||
decrement: (state) => {
|
||||
state.value -= 1;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const store = configureStore({
|
||||
reducer: counterSlice.reducer,
|
||||
});
|
||||
|
||||
export const { increment, decrement } = counterSlice.actions;
|
||||
export default store;
|
||||
```
|
||||
## Когда использовать Redux?
|
||||
- В больших приложениях с множеством компонентов, которые зависят от общего состояния.
|
||||
- Когда требуется централизованное управление состоянием.
|
||||
- Когда нужно отслеживать и отлаживать изменения состояния (например, с помощью Redux DevTools).
|
||||
|
||||
Для небольших приложений **Redux** может быть избыточным, и в таких случаях лучше использовать **Context API** или другие более простые решения.
|
||||
@@ -2,4 +2,57 @@
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# RTK-query
|
||||
# RTK-query
|
||||
|
||||
**RTK Query** — это мощная библиотека для управления данными и выполнения запросов к API, встроенная в **Redux Toolkit (RTK)**. Она предназначена для упрощения работы с асинхронными запросами, кэшированием данных и управлением состоянием, связанным с API, в React-приложениях. RTK Query автоматически генерирует редьюсеры, действия и селекторы, что значительно сокращает количество boilerplate-кода.
|
||||
|
||||
## Основные возможности RTK Query:
|
||||
1. **Автоматическое кэширование:**
|
||||
- RTK Query автоматически кэширует данные, полученные от API, и управляет их актуальностью.
|
||||
- Повторные запросы к одним и тем же данным не выполняются, если они уже есть в кэше.
|
||||
2. **Автоматическая генерация хуков:**
|
||||
- RTK Query генерирует React-хуки (например, `useGetPostsQuery`) для выполнения запросов и управления состоянием загрузки, ошибок и данных.
|
||||
3. **Интеграция с Redux:**
|
||||
- RTK Query использует Redux под капотом, что позволяет легко интегрировать её с существующим Redux-стором.
|
||||
4. **Поддержка мутаций:**
|
||||
- Помимо запросов на получение данных (queries), RTK Query поддерживает мутации (mutations) для отправки данных на сервер (например, POST, PUT, DELETE).
|
||||
5. **Оптимизация запросов:**
|
||||
- RTK Query автоматически управляет подписками на данные, что предотвращает лишние запросы и ререндеры.
|
||||
6. **Инструменты разработчика:**
|
||||
- RTK Query интегрируется с Redux DevTools, что позволяет отслеживать состояние запросов и кэша.
|
||||
|
||||
Основные хуки RTK Query:
|
||||
1. useQuery:
|
||||
- Используется для выполнения **GET**-запросов.
|
||||
- Возвращает объект с данными, состоянием загрузки (`isLoading`), ошибкой (~~error~~) и другими полезными полями.
|
||||
- Пример: `useGetPostsQuery()`.
|
||||
2. useMutation:
|
||||
- Используется для выполнения **POST**, **PUT**, **DELETE** и других запросов, изменяющих данные на сервере.
|
||||
- Возвращает функцию для выполнения мутации и объект с состоянием (`isLoading`, `isError` и т.д.).
|
||||
- Пример: `useAddPostMutation()`.
|
||||
3. useLazyQuery:
|
||||
- Используется для выполнения запросов по требованию (например, при нажатии кнопки).
|
||||
- Пример: `const [fetchPost, { data }] = useLazyGetPostByIdQuery()`.
|
||||
|
||||
## Преимущества RTK Query:
|
||||
1. Минимум boilerplate-кода:
|
||||
- RTK Query автоматически генерирует редьюсеры, действия и хуки.
|
||||
2. Кэширование:
|
||||
- Данные автоматически кэшируются, что предотвращает лишние запросы.
|
||||
3. Интеграция с Redux:
|
||||
- RTK Query легко интегрируется с существующим Redux-стором.
|
||||
4. Оптимизация:
|
||||
- Автоматическое управление подписками и ререндерами.
|
||||
5. Поддержка TypeScript:
|
||||
- RTK Query полностью поддерживает TypeScript, что делает её удобной для типизированных проектов.
|
||||
|
||||
## Недостатки RTK Query:
|
||||
1. Ограниченная гибкость:
|
||||
- RTK Query ориентирована на REST API и GraphQL. Для более сложных сценариев может потребоваться ручная настройка.
|
||||
2. Зависимость от Redux:
|
||||
- Если в проекте не используется Redux, RTK Query может быть избыточной.
|
||||
|
||||
## Когда использовать RTK Query?
|
||||
- Если в приложении много запросов к API и нужно управлять кэшированием.
|
||||
- Если уже используется Redux Toolkit и нужно упростить работу с API.
|
||||
- Для приложений, где требуется минимум boilerplate-кода.
|
||||
|
||||
@@ -2,4 +2,62 @@
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Zustand
|
||||
# Zustand
|
||||
|
||||
Zustand — это минималистичная и современная библиотека для управления состоянием в React-приложениях. Она предоставляет
|
||||
простой и интуитивно понятный API для создания и использования хранилищ (stores), что делает её отличной альтернативой
|
||||
более сложным решениям, таким как Redux или MobX. Zustand легковесен, не требует большого количества boilerplate-кода и
|
||||
легко интегрируется с React.
|
||||
|
||||
## Основные особенности Zustand:
|
||||
|
||||
1. Простота:
|
||||
- Zustand имеет минимальный API, что делает его очень простым в использовании.
|
||||
- Для начала работы достаточно создать store с помощью функции create.
|
||||
2. Минимум boilerplate:
|
||||
- В отличие от Redux, Zustand не требует настройки редьюсеров, действий или middleware.
|
||||
3. Реактивность:
|
||||
- Zustand автоматически отслеживает изменения состояния и обновляет компоненты, которые используют store.
|
||||
4. Гибкость:
|
||||
- Zustand позволяет хранить как простые, так и сложные состояния, включая асинхронные операции.
|
||||
5. Интеграция с React:
|
||||
- Zustand предоставляет хуки для удобного использования store в функциональных компонентах.
|
||||
6. Производительность:
|
||||
- Zustand оптимизирован для минимизации лишних ререндеров.
|
||||
|
||||
## Преимущества Zustand:
|
||||
|
||||
1. Минимализм:
|
||||
- Zustand предоставляет только необходимый функционал, без лишних сложностей.
|
||||
2. Простота интеграции:
|
||||
- Не требуется настройка провайдеров или обёрток, как в Redux.
|
||||
3. Производительность:
|
||||
- Zustand оптимизирован для минимизации ререндеров.
|
||||
4. Гибкость:
|
||||
- Подходит как для простых, так и для сложных сценариев управления состоянием.
|
||||
5. TypeScript-поддержка:
|
||||
- Zustand полностью поддерживает TypeScript, что делает его удобным для типизированных проектов.
|
||||
|
||||
## Недостатки Zustand:
|
||||
|
||||
1. Ограничение в инструменте для отладки:
|
||||
- В отличие от Redux, Zustand не имеет таких мощных инструментов, как Redux DevTools, но при этом практически
|
||||
полностью совместим и может использовать его для отладки.
|
||||
2. Меньше сообщества:
|
||||
- Zustand менее популярен, чем Redux, поэтому может быть меньше ресурсов и примеров.
|
||||
|
||||
## Когда использовать Zustand?
|
||||
|
||||
- Для небольших и средних приложений, где не требуется сложная логика управления состоянием.
|
||||
- Когда нужно быстро начать работу с минимальной настройкой.
|
||||
- Если вы хотите избежать boilerplate-кода, характерного для Redux.
|
||||
|
||||
## Сравнение Zustand и Redux:
|
||||
|
||||
| Характеристика | Zustand | Redux |
|
||||
|---------------------|------------------------------------------|--------------------------------------------|
|
||||
| Сложность | Простой и минималистичный | Более сложный, требует boilerplate |
|
||||
| Настройка | Минимальная | Требует настройки store, middleware |
|
||||
| Производительность | Оптимизирован для минимизации ререндеров | Может требовать дополнительной оптимизации |
|
||||
| Инструменты отладки | Ограниченные | Redux DevTools |
|
||||
| Сообщество | Меньше | Огромное сообщество |
|
||||
|
||||
@@ -2,4 +2,43 @@
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Apollo graphql
|
||||
# Apollo graphql
|
||||
|
||||
**Apollo Client** — это мощная библиотека для работы с GraphQL в React-приложениях. Она предоставляет инструменты для выполнения запросов, управления состоянием, кэширования данных и интеграции с UI. Apollo Client упрощает взаимодействие с GraphQL API, делая процесс разработки более эффективным и удобным.
|
||||
|
||||
## Основные возможности Apollo Client:
|
||||
1. **Выполнение GraphQL-запросов:**
|
||||
- Apollo Client позволяет легко выполнять запросы (**queries**), мутации (**mutations**) и подписки (**subscriptions**).
|
||||
2. **Кэширование:**
|
||||
- Встроенный кэш нормализует данные и автоматически обновляет UI при изменении данных.
|
||||
3. **Интеграция с React:**
|
||||
- Apollo Client предоставляет хуки (например, `useQuery`, `useMutation`) для удобной работы с GraphQL в функциональных компонентах.
|
||||
4. **Поддержка TypeScript:**
|
||||
- Apollo Client полностью поддерживает TypeScript, что делает его удобным для типизированных проектов.
|
||||
5. **Инструменты разработчика:**
|
||||
- Apollo DevTools позволяют отслеживать запросы, кэш и производительность.
|
||||
6. **Реактивность:**
|
||||
- Apollo Client автоматически обновляет компоненты при изменении данных.
|
||||
|
||||
## Преимущества Apollo Client:
|
||||
1. **Удобство:**
|
||||
- Apollo Client предоставляет простой и интуитивно понятный API для работы с GraphQL.
|
||||
2. **Кэширование:**
|
||||
- Встроенный кэш автоматически обновляет UI при изменении данных.
|
||||
3. **Интеграция с React:**
|
||||
- Хуки (useQuery, useMutation, useSubscription) делают работу с GraphQL в React очень удобной.
|
||||
4. **Поддержка TypeScript:**
|
||||
- Apollo Client полностью поддерживает TypeScript.
|
||||
5. **Инструменты разработчика:**
|
||||
- Apollo DevTools позволяют отслеживать запросы, кэш и производительность.
|
||||
|
||||
## Недостатки Apollo Client:
|
||||
1. **Размер бандла:**
|
||||
- Apollo Client добавляет дополнительный вес в бандл приложения.
|
||||
2. **Сложность для простых сценариев:**
|
||||
- Для небольших проектов Apollo Client может быть избыточным.
|
||||
|
||||
## Когда использовать Apollo Client?
|
||||
- Если ваше приложение использует GraphQL API.
|
||||
- Если требуется кэширование данных и автоматическое обновление UI.
|
||||
- Для сложных приложений с множеством запросов и мутаций.
|
||||
@@ -2,4 +2,44 @@
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# React-query
|
||||
# React-query
|
||||
|
||||
**TanStack Query** (ранее известная как **React Query**) — это мощная библиотека для управления состоянием данных в React-приложениях. Она фокусируется на работе с асинхронными данными, такими как запросы к API, и предоставляет инструменты для кэширования, синхронизации, фонового обновления и управления состоянием загрузки и ошибок. TanStack Query значительно упрощает работу с данными, делая код более чистым и эффективным.
|
||||
|
||||
## Основные возможности TanStack Query:
|
||||
1. **Кэширование данных:**
|
||||
- Автоматически кэширует данные и управляет их актуальностью.
|
||||
- Повторные запросы к одним и тем же данным не выполняются, если они уже есть в кэше.
|
||||
2. **Фоновое обновление:**
|
||||
- Автоматически обновляет данные в фоновом режиме, чтобы поддерживать их актуальность.
|
||||
3. **Интеграция с React:**
|
||||
- Предоставляет хуки (например, `useQuery`, `useMutation`) для удобной работы с данными в функциональных компонентах.
|
||||
4. **Оптимизация запросов:**
|
||||
- Управляет подписками на данные, предотвращая лишние запросы и ререндеры.
|
||||
5. **Поддержка TypeScript:**
|
||||
- TanStack Query полностью поддерживает TypeScript, что делает её удобной для типизированных проектов.
|
||||
6. **Инструменты разработчика:**
|
||||
- Встроенные DevTools позволяют отслеживать состояние запросов и кэша.
|
||||
|
||||
## Преимущества TanStack Query:
|
||||
1. **Минимум boilerplate:**
|
||||
- TanStack Query автоматически управляет кэшированием, обновлением и ошибками.
|
||||
2. **Производительность:**
|
||||
- Оптимизирует запросы и предотвращает лишние ререндеры.
|
||||
3. **Гибкость:**
|
||||
- Подходит для работы с REST API, GraphQL и другими источниками данных.
|
||||
4. **Интеграция с React:**
|
||||
- Предоставляет удобные хуки для работы с данными.
|
||||
5. **Поддержка TypeScript:**
|
||||
- Полностью поддерживает TypeScript.
|
||||
|
||||
## Недостатки TanStack Query:
|
||||
1. **Ориентация на данные:**
|
||||
- TanStack Query фокусируется на асинхронных данных и не подходит для управления состоянием приложения в целом.
|
||||
2. **Кривая обучения:**
|
||||
- Некоторые концепции (например, инвалидация кэша) могут быть сложными для новичков.
|
||||
|
||||
## Когда использовать TanStack Query?
|
||||
- Если ваше приложение активно взаимодействует с API.
|
||||
- Если требуется кэширование данных и автоматическое обновление UI.
|
||||
- Для приложений с большим количеством асинхронных запросов.
|
||||
|
||||
@@ -2,4 +2,55 @@
|
||||
sidebar_position: 7
|
||||
---
|
||||
|
||||
# Mobx
|
||||
# Mobx
|
||||
|
||||
**MobX** — это библиотека для управления состоянием в JavaScript-приложениях, включая React. Она использует концепцию **реактивного программирования**, чтобы автоматически отслеживать изменения состояния и обновлять компоненты, которые зависят от этого состояния. MobX известен своей простотой, минимальным количеством boilerplate-кода и высокой производительностью.
|
||||
|
||||
## Основные концепции MobX:
|
||||
1. **Observable State (наблюдаемое состояние):**
|
||||
- Состояние в MobX помечается как observable, что позволяет библиотеке автоматически отслеживать его изменения.
|
||||
2. **Actions (действия):**
|
||||
- Действия — это функции, которые изменяют состояние. Они помечаются как action.
|
||||
3. **Computed Values (вычисляемые значения):**
|
||||
- Это значения, которые автоматически вычисляются на основе observable-состояния. Они помечаются как computed.
|
||||
4. **Reactions (реакции):**
|
||||
- Реакции — это функции, которые автоматически выполняются при изменении observable-состояния. Например, обновление UI в React-компонентах.
|
||||
5. **Автоматическая реактивность:**
|
||||
- MobX автоматически отслеживает зависимости между observable-состоянием и компонентами, что делает код более декларативным.
|
||||
|
||||
## Преимущества MobX:
|
||||
1. **Простота:**
|
||||
- Минимальный boilerplate-код и интуитивно понятный API.
|
||||
2. **Реактивность:**
|
||||
- Автоматическое отслеживание изменений и обновление компонентов.
|
||||
3. **Производительность:**
|
||||
- MobX оптимизирует обновления, минимизируя лишние ререндеры.
|
||||
4. **Гибкость:**
|
||||
- Подходит как для простых, так и для сложных сценариев управления состоянием.
|
||||
5. **Поддержка TypeScript:**
|
||||
- MobX полностью поддерживает TypeScript.
|
||||
|
||||
## Как использовать MobX в React?
|
||||
1. **Установка**
|
||||
- Установите MobX и mobx-react-lite (или mobx-react для классовых компонентов)
|
||||
2. **Создание store**
|
||||
- Создайте store с использованием MobX
|
||||
3. **Подключение store к React**
|
||||
- Используйте observer из mobx-react-lite, чтобы сделать компонент реактивным:
|
||||
4. **Использование нескольких stores**
|
||||
- Если у вас несколько stores, можно использовать React Context для их передачи
|
||||
|
||||
MobX легко работает с асинхронными операциями. Например, можно добавить загрузку данных.
|
||||
|
||||
## Недостатки MobX:
|
||||
1. **Меньше структурированности:**
|
||||
- В отличие от Redux, MobX не навязывает строгую структуру, что может привести к неорганизованному коду.
|
||||
2. **Меньше инструментов для отладки:**
|
||||
- Хотя MobX имеет DevTools, они менее мощные, чем Redux DevTools.
|
||||
3. **Кривая обучения:**
|
||||
- Некоторые концепции (например, реакции) могут быть сложными для новичков.
|
||||
|
||||
## Когда использовать MobX?
|
||||
- Для небольших и средних приложений, где требуется простое и эффективное управление состоянием.
|
||||
- Если вы хотите избежать boilerplate-кода, характерного для Redux.
|
||||
- Для приложений с большим количеством реактивных данных.
|
||||
Reference in New Issue
Block a user