Освоение Redux: стратегии организации большого магазина Redux

Когда вы начинаете работать с Redux в большом приложении, одним из наиболее важных аспектов, который нужно сделать правильно, является то, как вы структурируете и организуете свой магазин Redux. По мере роста количества действий, редюсеров и ПО промежуточного слоя вам потребуется масштабируемая и удобная в сопровождении структура для эффективного управления состоянием вашего приложения. Этот учебник призван предоставить стратегии и лучшие практики, которые помогут вам в этом.

1. Организуйте свои файлы по функциям

Вместо разделения вашей кодовой базы на папки, такие как «действия», «редьюсеры» и «контейнеры», рассмотрите возможность организации по функциям. Этот подход объединяет все, что связано с определенной функцией, что упрощает навигацию и поддержку вашей кодовой базы по мере ее роста.

Например, если у вас есть функция под названием «пользователи», у вас будет такая структура каталогов:

- src
  - features
    - users
      - UsersComponent.jsx
      - usersSlice.js
      - UsersAPI.js
      - UsersTests.js

В папке «users» у вас есть все, что связано с функцией «users», включая ее компоненты React, фрагменты Redux, вызовы API и тесты.

2. Используйте Redux Toolkit createSlice и createAsyncThunk

По мере роста вашего приложения управление типами действий, создателями действий и преобразователями может стать утомительным. Функции createSlice и createAsyncThunk Redux Toolkit помогают уменьшить этот шаблон и упростить управление кодом.

Вот пример с функцией «книги»:

// src/features/books/booksSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { fetchBooks } from './BooksAPI';

// An async thunk action to fetch books
export const fetchBooksThunk = createAsyncThunk('books/fetchBooks', fetchBooks);

const booksSlice = createSlice({
  name: 'books',
  initialState: { entities: [], loading: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchBooksThunk.fulfilled, (state, action) => {
      state.entities = action.payload;
      state.loading = 'idle';
    });
    builder.addCase(fetchBooksThunk.pending, (state, action) => {
      state.loading = 'loading';
    });
    builder.addCase(fetchBooksThunk.rejected, (state, action) => {
      state.loading = 'idle';
    });
  },
});

export default booksSlice.reducer;

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

3. Нормализуйте форму своего состояния

Работая с большими объемами данных, вы можете столкнуться с такими проблемами, как дублирование данных и несогласованность. Нормализация формы вашего состояния может помочь решить эти проблемы.

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

Вот пример:

// Non-normalized state
{
  posts: [{
    id: 1,
    title: 'Post 1',
    author: {
      id: 1,
      name: 'Author 1'
    }
  }, {
    id: 2,
    title: 'Post 2',
    author: {
      id: 1,
      name: 'Author 1'
    }
  }]
}

// Normalized state
{
  posts: {
    byId: {
      1: { id: 1, title: 'Post 1', authorId: 1 },
      2: { id: 2, title: 'Post 2', authorId: 1 },
    },
    allIds: [1, 2]
  },
  authors: {
    byId: {
      1: { id: 1, name: 'Author 1' },
    },
    allIds: [1]
  }
}

В нормализованном состоянии сообщения и авторы разделены на свои собственные «таблицы», а сообщения ссылаются на авторов по их идентификаторам. Эта структура устраняет избыточность и упрощает обновление отдельных сообщений или авторов.

Помните, что это всего лишь рекомендации, которые помогут вам структурировать ваш магазин Redux в больших приложениях. В зависимости от предпочтений вашей команды и вашего конкретного варианта использования вы можете выбрать другой подход. Главное, чтобы ваш магазин Redux оставался управляемым, масштабируемым и простым для понимания. Оставайтесь с нами, чтобы узнать больше о работе с Redux в крупномасштабных приложениях! Удачного кодирования!

Если вам понравилась статья и вы хотите выразить свою поддержку, сделайте следующее:

👏 Аплодируйте истории (50 аплодисментов), чтобы эта статья попала в топ

👉Подпишитесь на меня в Среднем

Посмотрите больше контента в моем профиле Medium