Установка Redux и Redux Toolkit для React Native — настройка проекта

Почему Redux Toolkit?

Redux Toolkit — официально рекомендованное решением для работы с Redux, которое значительно упрощает настройку и использование Redux в приложении. Вместо скучного конфигурирования с нуля мы за пару команд создадим рабочую конфигурацию, подключим Redux в проект React Native и даже посмотрим на магию Provider.

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

Установка необходимых пакетов

Прежде всего убедимся, что у нас установлен рабочий проект React Native. Если вы ещё не подготовили проект, выполните команду:

npx react-native init MyReduxApp

После этого переходим в папку проекта:

cd MyReduxApp

Теперь установим Redux и Redux Toolkit. Эти ребята — наши главные инструменты управления состоянием:

npm install @reduxjs/toolkit react-redux

И для дополнительной уверенности, что всё прошло успешно, проверим файл package.json. У вас должны быть записи о @reduxjs/toolkit и react-redux.

Настройка Redux Toolkit в React Native

Создание Store

Store — это сердце вашего приложения, куда Redux складывает всё состояние. Давайте создадим его.

Сначала создаём папку store для сохранения всех файлов, связанных с Redux. Затем создаём файл store/index.ts:

mkdir store
touch store/index.ts

Теперь наполним файл store/index.ts следующим содержимым:

import { configureStore } from '@reduxjs/toolkit';

// Здесь пока что мы оставляем пустой reducer. Позже добавим логики.
const store = configureStore({
  reducer: {},
});

// Типы — для нашей безопасности.
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

Здесь происходит магия configureStore. Он автоматически настраивает хранилище Redux, добавляет стандартные middleware и даже включает DevTools для отладки. Красота, правда?

Подключение Provider

Redux работает через контекст React, чтобы предоставить доступ к хранилищу всем компонентам. Для этого мы используем Provider из react-redux. Откройте App.tsx и замените содержимое на следующее:

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import { Text, View } from 'react-native';

const App = () => {
  return (
    <Provider store={store}>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Redux Toolkit подключен к React Native!</Text>
      </View>
    </Provider>
  );
};

export default App;

Здесь, добавляя Provider, мы делаем так, чтобы всё наше приложение могло "видеть" хранилище Redux. Теперь компоненты смогут взаимодействовать с глобальным состоянием.

Порядок обновления проекта

Хорошая привычка — поддерживать зависимости актуальными. Перед тем как настроить Redux Toolkit, убедитесь, что у вас установлены последние версии React Native, Redux Toolkit и react-redux.

Чтобы проверить, используйте команду:

npm outdated

Если обновления доступны, выполните:

npm update

Проверка корректности установки

Мы хотим убедиться, что хранилище Redux действительно работает. Для этого временно добавим маленький пример в файл store/index.ts:

import { configureStore, createSlice } from '@reduxjs/toolkit';

// Создание простого среза для тестирования.
const testSlice = createSlice({
  name: 'test',
  initialState: { value: 'Hello, Redux Toolkit!' },
  reducers: {
    updateValue: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const { updateValue } = testSlice.actions;

const store = configureStore({
  reducer: {
    test: testSlice.reducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

Затем поменяйте компонент App.tsx так, чтобы отобразить это состояние:

import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import store, { RootState, updateValue } from './store';
import { Text, View, Button } from 'react-native';

const ReduxTestComponent = () => {
  const value = useSelector((state: RootState) => state.test.value);
  const dispatch = useDispatch();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{value}</Text>
      <Button title="Изменить текст" onPress={() => dispatch(updateValue('Redux работает!'))} />
    </View>
    );
};

const App = () => {
  return (
    <Provider store={store}>
      <ReduxTestComponent />
    </Provider>
  );
};

export default App;

Теперь, если вы запустите приложение npx react-native run-android или npx react-native run-ios, вы увидите текст "Hello, Redux Toolkit!". После нажатия на кнопку он изменится на "Redux работает!". Вау, это действительно работает!

Где это пригодится?

• Авторизация пользователя: глобальное состояние отлично подходит для хранения информации о пользователе.
• Корзина товаров: для e-commerce приложений это стандарт.
• Темы/настройки UI: храните текущую тему, язык или любой другой общий контекст приложения.

Типичные ошибки на этапе установки

Не пытайтесь сразу строить сложное приложение, если не настроили базовые вещи. Вот несколько типичных проблем:

1. Не подключили Provider: если забыть обернуть приложение в Provider, ваши хуки useSelector и useDispatch не будут работать.
2. Неверный тип состояния: не забудьте научить TypeScript работать с вашим хранилищем, добавив RootState.
3. Ошибка в пути: иногда файл store/index.ts импортируется неверно. Проверьте пути до файла, если приложение не запускается.