Когда приложение становится сложнее, управление состоянием превращается в настоящий вызов. Перекладывать данные между компонентами через props начинает выглядеть как бесконечная карусель. И вот тут на помощь приходит Redux — инструмент, который помогает управлять состоянием в больших приложениях.

Но давайте будем честными: классический Redux может показаться сложным и громоздким. К счастью, появился Redux Toolkit, который делает работу с Redux проще, понятнее и быстрее.

Сегодня мы разберём:

• Основы Redux и его ключевые концепции.
• Почему Redux Toolkit стал таким популярным.
• Реализуем корзину покупок с добавлением и удалением товаров.

Теория: основы Redux

Redux — это библиотека для управления состоянием. Она построена на трёх ключевых принципах:

• Единый источник правды
  Всё состояние приложения хранится в одном большом объекте — store.
• Состояние только для чтения
  Нельзя изменять состояние напрямую. Чтобы изменить данные, нужно отправить action.
• Изменения через чистые функции (reducers)
  Редюсеры (reducers) — это функции, которые принимают текущее состояние и действие, а затем возвращают новое состояние.

Что такое Redux Toolkit?

Redux Toolkit — это набор инструментов, который упрощает работу с Redux. Он решает главные проблемы классического Redux:

• Много шаблонного кода.
• Сложность настройки.
• Риск ошибок из-за ручного написания действий и редюсеров.

Почему Redux Toolkit?

• Меньше кода: Весь шаблонный код создаётся автоматически.
• Простая настройка: Включает в себя лучшие практики, такие как инструмент для отладки (Redux DevTools) и асинхронные запросы (thunk).
• Модульная структура: Состояние, действия и редюсеры теперь находятся в одном месте.

Практика: корзина покупок

Реализуем приложение с корзиной покупок, где пользователь сможет:

• Добавлять товары в корзину.
• Удалять товары.
• Видеть общий список товаров и их количество.

Шаг 1: Установка Redux Toolkit

В терминале выполните команду:

npm install @reduxjs/toolkit react-redux

Шаг 2: Создание хранилища (store)

В корне проекта создадим папку store. В ней создадим файл store.js:

import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';

// Создаём хранилище с помощью configureStore
export const store = configureStore({
  reducer: {
    cart: cartReducer, // Добавляем редюсер корзины
  },
});

Шаг 3: Создание slice для корзины

Создадим файл cartSlice.js в папке store:

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

// Начальное состояние корзины
const initialState = {
  items: [], // Список товаров в корзине
};

// Создаём slice для корзины
const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addItem: (state, action) => {
      // Добавляем товар в корзину
      state.items.push(action.payload);
    },
    removeItem: (state, action) => {
      // Удаляем товар по индексу
      state.items = state.items.filter((_, index) => index !== action.payload);
    },
  },
});

// Экспортируем действия
export const { addItem, removeItem } = cartSlice.actions;

// Экспортируем редюсер для подключения в store
export default cartSlice.reducer;

Шаг 4: Подключение Redux в приложение

Откройте App.js и оберните приложение в Provider:

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store/store';
import ShoppingCart from './ShoppingCart'; // Наш главный компонент

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

export default App;

Шаг 5: Создание компонента ShoppingCart

Теперь создадим основной компонент корзины. Добавим кнопки для добавления и удаления товаров.

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { addItem, removeItem } from './store/cartSlice';

const ShoppingCart = () => {
  const [item, setItem] = useState(''); // Для хранения нового товара
  const items = useSelector((state) => state.cart.items); // Получаем список товаров из хранилища
  const dispatch = useDispatch(); // Для отправки действий

  const handleAddItem = () => {
    if (item.trim()) {
      dispatch(addItem(item)); // Добавляем новый товар
      setItem(''); // Очищаем поле ввода
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Корзина покупок</Text>

      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          value={item}
          onChangeText={setItem}
          placeholder="Введите название товара"
        />
        <Button title="Добавить" onPress={handleAddItem} />
      </View>

      <FlatList
        data={items}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => (
          <View style={styles.item}>
            <Text>{item}</Text>
            <Button
              title="Удалить"
              onPress={() => dispatch(removeItem(index))} // Удаляем товар по индексу
            />
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  inputContainer: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    padding: 10,
    marginRight: 10,
  },
  item: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
    backgroundColor: '#fff',
    borderRadius: 5,
    marginBottom: 10,
  },
});

export default ShoppingCart;

Что получилось?

• Добавление товара: Вводите название товара в текстовое поле, нажимаете «Добавить», и он появляется в списке.
• Удаление товара: Нажимаете «Удалить» напротив нужного товара, и он исчезает.

Преимущества Redux Toolkit в нашем приложении

• Минимум кода: Все действия и редюсеры находятся в одном месте (cartSlice).
• Простая настройка: Не нужно вручную писать action creators и подключать их.
• Удобство масштабирования: Вы легко добавите больше функциональности (например, изменение количества товаров).