Введение 🎯

Узнайте, как упростить процесс написания и управления сложной асинхронной логикой в ​​вашем магазине Redux с помощью Redux Toolkit. Эта популярная библиотека от команды Redux предоставляет упрощенный API для управления асинхронными рабочими процессами, включая возможность отправки Thunk Actions.

В этой статье мы рассмотрим пример использования Thunk Actions с Redux Toolkit для получения данных из API и отображения их на экране. Следуйте инструкциям и узнайте, как можно эффективно управлять состоянием вашего приложения предсказуемым и масштабируемым способом.

Предварительные условия

  1. Настройка реагирующего приложения.
  2. Как установить и настроить redux-toolkit
  3. Иметь базовые знания redux-toolkit.
  4. Базовые знания javascript будут хорошими.

Redux — популярная библиотека управления состоянием для приложений JavaScript. Это позволяет разработчикам управлять состоянием своих приложений предсказуемым и масштабируемым способом. Одной из ключевых особенностей Redux является возможность отправлять асинхронные действия с помощью промежуточного программного обеспечения, такого как промежуточное программное обеспечение redux-thunk.

Однако написание сложной асинхронной логики и управление ею с помощью redux-thunk может оказаться затруднительным, особенно в крупных приложениях. Вот тут-то и появляется Redux Toolkit. Redux Toolkit — это новая библиотека от команды Redux, которая предоставляет упрощенный API для написания и тестирования асинхронной логики в вашем магазине Redux.

Одной из ключевых особенностей Redux Toolkit является функция createSlice, которая позволяет вам легко создавать состояние и действия вашего хранилища Redux и управлять ими. В дополнение к createSlice Redux Toolkit также включает возможность отправки Thunk Actions, что позволяет вам писать асинхронную логику в ваших действиях.

Давайте рассмотрим пример, чтобы увидеть, как мы можем использовать Thunk Actions с Redux Toolkit для обработки сложного асинхронного рабочего процесса в нашем приложении.

Пример: получение данных из API

Предположим, у нас есть приложение React, которому необходимо получать продукты из API и отображать их на экране. С помощью Redux Toolkit вы можете написать Thunk Action для обработки этого процесса и отправить его из вашего компонента.

В этой статье мы будем использовать API dummyjson для лучшего понимания.😊

Вот пример того, как мы можем написать Thunk Action для получения продуктов из нашего API:

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

export const fetchData = createAsyncThunk(
  'fetchData',
  async () => {
    const response = await axios.get('https://dummyjson.com/products');
    return response.products;
  }
);

const productSlice = createSlice({
  name: 'products',
  initialState: {
    products: [],
    loading: false,
    error: null,
  },
  reducers: {},
  extraReducers: {
    [fetchData.pending]: (state) => {
      state.loading = true;
    },
    [fetchData.fulfilled]: (state, action) => {
      state.data = action.payload;
      state.loading = false;
      state.error = null;
    },
    [fetchData.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.error;
    },
  },
});

export const { } = productSlice.actions;
export default productSlice.reducer;

В этом примере мы используем функцию createAsyncThunk из Redux Toolkit для создания асинхронного действия Thunk. Первый аргумент createAsyncThunk — это имя действия, а второй аргумент — асинхронная функция, которая возвращает данные, которые мы хотим получить из API.

Затем мы используем функцию createSlice из Redux Toolkit, чтобы создать срез наших данных. В объекте extraReducers мы обрабатываем три возможных состояния Thunk Action: pending, fulfilled и rejected.

При такой настройке мы можем отправить действие fetchData Thunk из нашего компонента, используя хук useDispatch из библиотеки react-redux:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './dataSlice';

const DataList = () => {
  const dispatch = useDispatch();
  const { products, loading, error } = useSelector((state) => state.products);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.title}</li>
      ))}
    </ul>
  );
};

export default ProductList;

В этом примере мы используем перехватчик useDispatch для получения функции dispatch из хранилища Redux. Затем мы используем хук useEffect для отправки действия fetchData Thunk Action при монтировании компонента.

Мы также используем хук useSelector из библиотеки react-redux для получения данных, состояния загрузки и ошибок из хранилища Redux.

Наконец, мы визуализируем компонент на основе состояния выборки данных. Если данные загружаются, мы отображаем сообщение «Загрузка…». Если есть ошибка, мы показываем сообщение об ошибке. Если данные были успешно получены, мы отображаем список данных.

Заключение

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

Разве это не просто? 🤗 Дайте мне знать, что вы думаете.

Попробуйте это в своих проектах и ​​посмотрите, какую пользу это может принести!

Надеюсь, эти ресурсы будут вам полезны 😊

Мне бы хотелось связаться с вами в Твиттере | ЛинкедИн | Гитхаб

Увидимся в моей следующей статье в блоге. Заботиться!!!

Ресурсы