Зачем нужно глобальное состояние в мобильных приложениях — принципы и задачи

Локальное состояние vs глобальное состояние

Локальное состояние — это состояние, которое обрабатывается внутри отдельного компонента. Например, если вы хотите, чтобы в текстовом поле отображался введённый текст, то вы, скорее всего, используете useState:

import React, { useState } from 'react';
import { TextInput, Text, View } from 'react-native';

const InputComponent: React.FC = () => {
  const [text, setText] = useState('');

  return (
    <View>
      <TextInput
        placeholder="Введите текст"
        value={text}
        onChangeText={setText}
      />
      <Text>Вы ввели: {text}</Text>
    </View>
  );
};

export default InputComponent;

Такое состояние "живёт" в одном компоненте, и его нельзя передать напрямую другим компонентам (если только не использовать пропсы или другие механизмы).

Глобальное состояние, напротив, доступно для всей вашей системы. Это как большой "ресторанный холодильник", куда все могут заглянуть и взять нужные продукты. Если вы хотите, чтобы информация о текущем пользователе была доступна в любом месте приложения (скажем, на экране профиля, в боковом меню или в заголовке), вам потребуется глобальное состояние.

Когда необходимо глобальное состояние?

Когда сложность вашего приложения растёт, локальная работа с состоянием может перестать быть удобной. Представьте, что у вас есть несколько компонентов, которые зависят от одних и тех же данных, например, авторизация пользователя. У нас есть кнопка логина, личный кабинет, боковое меню — все эти части приложения должны "знать", вошёл ли пользователь. Передача этого состояния через пропсы или контекст начнёт выглядеть громоздко, и всё это будет сложно поддерживать.

Вот реальные сценарии, где глобальное состояние становится важным:

1. Авторизация пользователя. Данные текущего пользователя (имя, email, токен и т.д.) часто нужно передавать в разные части приложения, включая API-запросы и авторизацию маршрутов.

2. Общие данные между различными экранами. Например, в мобильном магазине корзина покупок должна быть доступна как на экране продуктов, так и на экране оформления заказа.

3. Состояние, зависящее от API-запросов. Если вы грузите данные для нескольких экранов, например, список товаров, эти данные должны быть доступны глобально, чтобы избежать лишних API-вызовов.

4. Настройки приложения. Тема приложения, язык и прочие настройки должны храниться глобально, чтобы их можно было менять в любом месте приложения.

Масштабируемость и глобальное состояние

Локальное состояние может усложнить масштабирование приложений. Давайте возьмём примеры типичных проблем:

1. Представим, что данные о пользователе нужно использовать сразу в трёх разных экранах. Передача этих данных через цепочку пропсов становится трудоёмкой и запутанной.
2. Если приходится изменять состояние в одном компоненте и сразу же отображать изменения в другом, локальное состояние быстро становится неудобным.

Здесь глобальное состояние помогает оставаться "чистым". Вместо того, чтобы копить сложные связи между компонентами, вы создаёте одно хранилище (store), где данные "живут" централизованно.

Пример использования глобального состояния

Давайте посмотрим на реальный пример. Представим, что мы создаём простое мобильное приложение для учёта задач (TODO). Наше приложение состоит из двух экранов:

1. Список задач — здесь будут отображаться все задачи.
2. Добавление новой задачи — экран, где мы можем добавить новую задачу.

Наивный подход: мы могли бы использовать локальное состояние в каждом компоненте. Но это означает, что экран списка задач ничего не "знает" о новом экране добавления задачи. Мы сталкиваемся с такой проблемой:

• Как мы передадим данные о новой задаче обратно в список задач?
• Как сделать так, чтобы новый список мгновенно обновился?

Вот почему глобальное состояние — это "спасательный круг". Вы можете хранить все задачи в одном центральном хранилище, а оба экрана будут "подключены" к нему. Таким образом, любое изменение состояния (добавление задачи) будет сразу видно везде.

Redux и Redux Toolkit: основа глобального состояния

Одним из самых популярных инструментов для управления глобальным состоянием является Redux, а его современная версия — Redux Toolkit — делает эту задачу легче и удобнее, особенно с TypeScript.

Почему Redux Toolkit?

• Он минимизирует количество шаблонного кода по сравнению с классическим Redux.
• Использует современные возможности JavaScript и TypeScript.
• Предоставляет встроенные решения для работы с асинхронными запросами через createAsyncThunk.

2

Задача

Модуль 3: React, 23 уровень, 0 лекция

Недоступна

Определение глобального состояния

Определение глобального состояния

Открыть