1. Введение в асинхронную логику в Redux Toolkit

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

createAsyncThunk:

• Автоматически генерирует типы ожидающих, выполненных и отклоненных действий.
• Облегчает обработку побочных эффектов, таких как запросы API.
• Легко интегрируется с фрагментами, созданными с помощью createSlice.

2. Использование createAsyncThunk для вызовов API

Давайте рассмотрим создание асинхронного преобразователя для получения данных из общедоступного API и управления различными состояниями загрузки.

Шаг 1. Настройка простой службы API
Для демонстрации этого примера мы воспользуемся бесплатным общедоступным API. Предположим, у нас есть конечная точка API, которая возвращает список сообщений.

Шаг 2. Создание асинхронного преобразователя
Сначала создайте новый файл фрагмента с именемpostsSlice.js внутри каталога Features/posts. Мы будем использовать createAsyncThunk для асинхронной загрузки сообщений.

// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk to fetch posts from an API
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data; // This will be the 'fulfilled' action payload
});

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    posts: [],
    status: 'idle', // idle | loading | succeeded | failed
    error: null,
  },
  reducers: {
    // Optional: add reducers for synchronous actions
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default postsSlice.reducer;

Объяснение:

createAsyncThunk: эта функция принимает два аргумента: строковый тип действия и асинхронную функцию. Функция async — это место, где происходит вызов API. Когда обещание разрешается, данные возвращаются и автоматически отправляются как полезная нагрузка выполненного действия.

extraReducers: используется для обработки действий, созданных createAsyncThunk. Мы управляем тремя состояниями: ожидание, выполнение и отклонение.

3. Интеграция Thunks в компоненты

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

Шаг 1. Создайте компонент PostsList
Создайте компонент PostsList.js в каталоге Features/posts:

// src/features/posts/PostsList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts } from './postsSlice';

const PostsList = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts.posts);
  const status = useSelector((state) => state.posts.status);
  const error = useSelector((state) => state.posts.error);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchPosts());
    }
  }, [status, dispatch]);

  let content;

  if (status === 'loading') {
    content = 
Loading...
;
  } else if (status === 'succeeded') {
    content = (
      

{posts.map((post) => (
• {post.title}
))}

{error}

Объяснение:

Хук useEffect отправляет fetchPosts при монтировании компонента, но только если текущий статус — «бездействующий».
Статус проверяется, чтобы определить, какой контент отображать (индикатор загрузки, список сообщений или сообщение об ошибке).

Шаг 2. Добавьте список сообщений в приложение

Обновите основной файл App.js, включив в него компонент PostsList:

// src/App.js
import React from 'react';
import PostsList from './features/posts/PostsList';

function App() {
  return (
    

      
    
  );
}

export default App;

4. Лучшие практики для асинхронных преобразователей

Избегайте тяжелой логики в компонентах: поддерживайте чистоту компонентов, отправляя преобразователи для обработки асинхронной логики.
Централизуйте обработку ошибок: обрабатывайте ошибки в своем фрагменте, а не повторяйте логику в каждом компоненте.
Нормализация данных. Рассмотрите возможность нормализации формы состояния с помощью таких библиотек, какnormalizr, для эффективного управления сложными структурами данных.
Запоминание селекторов: используйте createSelector from reselect, чтобы запомнить селекторы для повышения производительности.

5. Заключение и дальнейшие действия
В этой части мы рассмотрели, как обрабатывать асинхронную логику в Redux Toolkit с помощью createAsyncThunk. Мы научились создавать асинхронный преобразователь, обрабатывать различные состояния и использовать его в компоненте. В следующей части мы углубимся в RTK Query — мощный инструмент для извлечения и кэширования данных, который еще больше упрощает разработку Redux.

_
Оставайтесь с нами, чтобы увидеть Часть 3: Введение в RTK-запрос!_