🚀 Порталы и модальные окна в React: универсальное решение для вашего UI

Привет, друзья! 👋 Сегодня поговорим о порталах в React и их применении для создания универсальных компонентов модальных окон. Это важный инструмент для работы с элементами, которые должны отображаться вне DOM-иерархии родительского компонента.

🔹 Что такое порталы в React?

Порталы позволяют рендерить дочерние элементы в DOM-узел, который находится за пределами DOM-иерархии родительского компонента.

Создаются с помощью метода ReactDOM.createPortal.
Пример:

ReactDOM.createPortal(child, container)

- child — React-элемент, который нужно отобразить.
- container — DOM-узел, куда этот элемент будет вставлен.

🔹 Почему это важно для модальных окон?

Модальные окна часто должны:
1. Перекрывать всё приложение.
2. Не зависеть от родительских стилей.
3. Быть легко доступными для управления.

Порталы позволяют рендерить модальные окна в корневой DOM-узел, например, <div id="modal-root">.

🔹 Создание универсального компонента модального окна

Шаг 1. Добавьте корневой элемент в HTML:

<div id="modal-root"></div>

Шаг 2. Создайте компонент Modal:

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>
        {children}
      </div>
    </div>,
    document.getElementById('modal-root')
  );
};

export default Modal;

Что здесь происходит?
1. Условный рендеринг: если окно закрыто, ничего не возвращается.
2. Портал: модальное окно рендерится в #modal-root.
3. Закрытие по клику: окно закрывается при клике на фон или кнопку.

🔹 Использование компонента Modal

Пример в приложении:

import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setModalOpen(true)}>Открыть модальное окно</button>
      <Modal isOpen={isModalOpen} onClose={() => setModalOpen(false)}>
        <h1>большой привет от ReactJs Daily!</h1>
        <p>Подпишись на канал)</p>
      </Modal>
    </div>
  );
}

export default App;

🔹 Преимущества подхода

1. Изоляция: модальное окно не зависит от стилей родителя.
2. Гибкость: компонент легко переиспользовать.
3. Чистота DOM: модальное окно рендерится в отдельный контейнер, упрощая структуру приложения.

🎯 Заключение

Порталы в React — это мощный инструмент для работы с элементами вне стандартной DOM-иерархии. Используйте их, чтобы создавать удобные и универсальные модальные окна, которые будут легко интегрироваться в любое приложение.

ReactJs Daily | #begginers

🚀 Тестирование Redux: Actions, Reducers и подключение mock-хранилища

Привет! Сегодня разберём, как правильно тестировать actions, reducers и компоненты, подключённые к Redux. Эти знания помогут вам убедиться, что ваше состояние и логика работают корректно.

🔹 Тестирование reducers

Reducer — это чистая функция. Она принимает текущее состояние и action, возвращая новое состояние.

Структура теста
1. Определите начальное состояние.
2. Передайте в reducer action и проверьте результат.

Пример:

import { counterReducer } from './counterSlice';

describe('counterReducer', () => {
  it('должен увеличивать значение', () => {
    const initialState = { count: 0 };
    const action = { type: 'counter/increment' };

    const result = counterReducer(initialState, action);

    expect(result).toEqual({ count: 1 });
  });

  it('должен уменьшать значение', () => {
    const initialState = { count: 2 };
    const action = { type: 'counter/decrement' };

    const result = counterReducer(initialState, action);

    expect(result).toEqual({ count: 1 });
  });
});

Почему это важно?
- Убедитесь, что ваш reducer возвращает корректное состояние для каждого action.
- Проверка edge-кейсов (например, неожиданных значений).

🔹 Тестирование actions

Actions сами по себе тестировать несложно. Однако для thunk или асинхронных actions вам понадобятся моки.

Пример: Тестирование синхронных actions

import { increment, decrement } from './counterSlice';

describe('actions', () => {
  it('increment должен возвращать правильный action', () => {
    expect(increment()).toEqual({ type: 'counter/increment' });
  });

  it('decrement должен возвращать правильный action', () => {
    expect(decrement()).toEqual({ type: 'counter/decrement' });
  });
});

Пример: Тестирование асинхронных actions (с помощью redux-thunk)

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { fetchData } from './dataActions';
import { fetchDataSuccess } from './dataSlice';

const mockStore = configureMockStore([thunk]);

describe('async actions', () => {
  it('должен диспатчить fetchDataSuccess после успешного API-запроса', async () => {
    const store = mockStore({});
    const mockResponse = { data: 'test' };

    // Мокаем fetch
    global.fetch = jest.fn(() =>
      Promise.resolve({
        json: () => Promise.resolve(mockResponse),
      })
    );

    await store.dispatch(fetchData());

    const actions = store.getActions();
    expect(actions[0]).toEqual(fetchDataSuccess(mockResponse));
  });
});

🔹 Подключение mock-хранилища для компонентов

Для тестирования компонентов, использующих Redux, используйте mock-store или обёртку Provider с тестовым хранилищем.

Пример: Тестирование компонента с Provider

import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import Counter from './Counter';

const mockStore = configureMockStore([]);

describe('Counter component', () => {
  it('должен отображать начальное значение', () => {
    const store = mockStore({ counter: { count: 0 } });

    const { getByText } = render(
      <Provider store={store}>
        <Counter />
      </Provider>
    );

    expect(getByText('Count: 0')).toBeInTheDocument();
  });
});

🔹 Практические советы

1. Тестируйте reducers отдельно: Это чистые функции, их тестировать проще всего.
2. Используйте моки для API-запросов: jest.fn() или библиотеки, такие как msw.
3. Тестируйте взаимодействие компонентов с Redux: С помощью mock-store или настоящего Redux-хранилища в тестовой среде.

🎯 Заключение

Тестирование Redux — важная часть создания стабильных и надёжных приложений. Начните с проверки reducers, затем переходите к actions, а после - к тестированию компонентов с использованием mock-хранилища.

ReactJs Daily | #testing

🚀 Фишки Create React App: что вы могли не знать

Create React App (CRA) делает создание React-приложений простым и удобным. Однако за этим "простым стартом" скрываются мощные функции, которые часто остаются незамеченными. Давайте разберёмся, какие фишки CRA могут ускорить вашу работу и сделать её комфортнее.

🔹 1. Плагин TypeScript из коробки

Хотите использовать TypeScript? CRA полностью поддерживает его!
При создании нового проекта достаточно добавить флаг:

npx create-react-app my-app --template typescript

И вы получите готовую настройку для работы с TypeScript без дополнительной конфигурации.

🔹 2. Поддержка CSS и CSS Modules

CRA поддерживает как обычные CSS-стили, так и модульные стили (CSS Modules). Модульные стили позволяют изолировать CSS для каждого компонента.
Пример:

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click me</button>;
}

🔹 3. Работа с изображениями и файлами

Вы можете импортировать изображения и файлы прямо в ваш JavaScript-код:

import logo from './logo.svg';

function App() {
  return <img src={logo} alt="Logo" />;
}

CRA автоматически оптимизирует изображения при сборке для продакшена.

🔹 4. Hot Module Replacement (HMR)

При разработке изменения в вашем коде моментально применяются без перезагрузки страницы. Это называется горячая перезагрузка модулей, и CRA поддерживает её из коробки.

🔹 5. Автоматическая оптимизация для продакшена

Команда npm run build создаёт готовый к деплою проект с минимизацией файлов, оптимизацией CSS, и удалением ненужного кода.

🔹 6. Экспериментальные функции через `.env`

CRA позволяет использовать переменные окружения для настройки вашего приложения. Добавьте файл .env и укажите там переменные, например:

REACT_APP_API_URL=https://api.example.com

В коде они доступны через process.env.REACT_APP_API_URL.

🔹 7. Подключение к React Developer Tools

CRA предустанавливает все настройки для использования с React Developer Tools, позволяя вам отлаживать состояние компонентов прямо в браузере.

🔹 8. Легкое тестирование с Jest

В вашем проекте сразу настроен Jest, что позволяет писать тесты с первого дня. Просто добавьте тестовые файлы рядом с вашими компонентами, и запускайте:

npm test

🔹 9. Поддержка ESLint

CRA автоматически интегрирует ESLint для анализа вашего кода. Он не только помогает соблюдать стандарты, но и предоставляет полезные советы в консоли разработки.

🔹 10. Eject для кастомизации

Если вам нужно больше контроля над настройками (например, Webpack, Babel), вы можете выполнить npm run eject. Это сделает конфигурацию доступной для редактирования, но будьте осторожны: отменить eject невозможно!

🎯 Заключение

Create React App — это не просто инструмент для быстрого старта. Он предоставляет множество мощных функций, которые делают разработку удобной и эффективной. Используйте эти фишки, чтобы раскрыть весь потенциал CRA!

ReactJs Daily | #begginers

🚀 Отмена запросов в React: как правильно работать с асинхронностью

Работа с API — неотъемлемая часть разработки React-приложений. Но что делать, если запрос больше не нужен? Например, пользователь ушёл со страницы до того, как запрос завершился. Вот где возникает необходимость отмены запросов.

🔹 Почему это важно?

1. Избежание утечек памяти. Незакрытые запросы могут потреблять ресурсы.
2. Исключение ошибок. Попытка обновить состояние размонтированного компонента приведёт к ошибке в консоли.
3. Оптимизация производительности. Меньше ненужных запросов — лучше UX.

🔹 Как отменить запросы?

1. Используем AbortController
Встроенный API AbortController позволяет отменять запросы.

Пример:

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    fetch('https://api.example.com/posts', { signal })
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((err) => {
        if (err.name === 'AbortError') {
          console.log('Запрос отменён');
        } else {
          console.error('Ошибка:', err);
        }
      });

    return () => {
      controller.abort(); // Отменяем запрос при размонтировании
    };
  }, []);

  return <h1>Отмена запросов с помощью AbortController</h1>;
}

export default App;

Что здесь происходит?
- Мы создаём экземпляр AbortController.
- Передаём его signal в запрос fetch.
- При размонтировании компонента вызываем abort(), чтобы отменить запрос.

2. Используем библиотеки (например, Axios)
Некоторые библиотеки, такие как Axios, имеют встроенную поддержку отмены запросов.

Пример с Axios:

import React, { useEffect } from 'react';
import axios from 'axios';

function App() {
  useEffect(() => {
    const controller = new AbortController();

    axios
      .get('https://api.example.com/posts', {
        signal: controller.signal,
      })
      .then((response) => console.log(response.data))
      .catch((err) => {
        if (axios.isCancel(err)) {
          console.log('Запрос отменён');
        } else {
          console.error('Ошибка:', err);
        }
      });

    return () => {
      controller.abort();
    };
  }, []);

  return <h1>Отмена запросов с Axios</h1>;
}

export default App;

3. Обработка асинхронных эффектов с помощью флагов
Если вы не используете библиотеки или AbortController, можно обойтись флагами, хотя это менее элегантно.

Пример с флагом:

import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true;

    fetch('https://api.example.com/posts')
      .then((response) => response.json())
      .then((data) => {
        if (isMounted) {
          setData(data);
        }
      });

    return () => {
      isMounted = false; // Флаг при размонтировании
    };
  }, []);

  return <div>{data ? <h1>Данные загружены</h1> : <h1>Загрузка...</h1>}</div>;
}

export default App;

🔹 Рекомендации

1. Используйте AbortController для современных браузеров.
2. Если используете Axios или другую библиотеку — проверьте, поддерживает ли она отмену запросов.
3. Не забывайте очищать эффекты с асинхронным кодом, чтобы избежать утечек памяти.
4. Покрывайте такие сценарии тестами.

🎯 Заключение

Отмена запросов — это важный аспект работы с асинхронностью в React. Она улучшает производительность и стабильность приложения 😊

ReactJs Daily | #begginers

🚀 Тестирование API и эффектов в React: простые шаги для качественного кода

Тестирование API-запросов и эффектов, таких как useEffect, — это важная часть разработки, особенно в компонентах, которые взаимодействуют с сервером. Давайте разберём основные подходы и инструменты, которые помогут вам писать надёжные тесты.

🔹 Почему это важно?

Компоненты, работающие с API, часто становятся источником ошибок: проблемы с сетью, некорректные данные или неожиданные состояния. Тестирование помогает:
- Убедиться, что компоненты правильно обрабатывают запросы.
- Обнаруживать и предотвращать ошибки на ранних стадиях.
- Сохранять функциональность при изменении кода.

🔹 Тестирование API-запросов

1. Мокирование запросов с MSW
MSW позволяет имитировать серверные ответы без изменения кода компонента.

Пример настройки MSW:

import { setupServer } from 'msw/node';
import { rest } from 'msw';

const server = setupServer(
  rest.get('/api/data', (req, res, ctx) => {
    return res(ctx.json({ message: 'Success' }));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Тестирование компонента:

import { render, screen, waitFor } from '@testing-library/react';
import App from './App';

test('показывает данные после успешного запроса', async () => {
  render(<App />);
  
  expect(screen.getByText(/загрузка/i)).toBeInTheDocument();
  
  await waitFor(() => {
    expect(screen.getByText(/success/i)).toBeInTheDocument();
  });
});

2. Использование jest.fn() для мокирования функций
Если компонент вызывает функцию, переданную через пропсы, можно замокировать её с помощью jest.fn().

const mockFetchData = jest.fn(() => Promise.resolve({ message: 'Success' }));

test('вызывает fetchData при рендере', async () => {
  render(<App fetchData={mockFetchData} />);
  expect(mockFetchData).toHaveBeenCalledTimes(1);
});

🔹 Тестирование эффектов

useEffect часто используется для выполнения API-запросов, и важно убедиться, что компонент правильно реагирует на изменения.

1. Проверка побочных эффектов

import { render, screen } from '@testing-library/react';
import App from './App';

test('выполняет побочный эффект при монтировании', () => {
  render(<App />);
  
  expect(screen.getByText(/загрузка/i)).toBeInTheDocument();
});

2. Тестирование отмены эффектов
Если эффект включает очистку (например, отмену запросов), это тоже можно протестировать.

test('отменяет запрос при размонтировании', () => {
  const mockFetchData = jest.fn(() => Promise.resolve());
  const { unmount } = render(<App fetchData={mockFetchData} />);
  
  unmount();
  expect(mockFetchData).toHaveBeenCalledTimes(1);
});

🔹 Рекомендации

1. Мокируйте API-запросы вместо использования реального сервера. Это делает тесты быстрыми и надёжными.
2. Проверяйте поведение компонентов, а не их внутреннюю реализацию.
3. Тестируйте как успешные, так и ошибочные запросы.
4. Используйте cleanup для удаления ненужных эффектов.

🎯 Заключение

Тестирование API и эффектов — это основа стабильного приложения. MSW, Jest и React Testing Library — ваши главные помощники для проверки всех сценариев, от загрузки данных до обработки ошибок. Пишите тесты, и ваш код скажет вам спасибо! 😊

ReactJs Daily | #testing

🚀 Drag-and-Drop в React: простое руководство

Функционал drag-and-drop часто используется для организации элементов, перемещения файлов и других интерактивных действий. Сегодня разберём, как его реализовать в React с минимальными усилиями!

🔹 Основные шаги для реализации

1. Добавление событий перетаскивания
В HTML5 есть встроенные события для drag-and-drop:
- onDragStart — инициирует перетаскивание.
- onDragOver — позволяет элементу быть зоной для сброса.
- onDrop — срабатывает при отпускании элемента.

2. Создание базового компонента
Вот пример, где мы добавляем элемент для перетаскивания и область для сброса.

import React, { useState } from 'react';

const DragAndDrop = () => {
  const [droppedItem, setDroppedItem] = useState('');

  const handleDragStart = (e, data) => {
    e.dataTransfer.setData('text/plain', data);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    setDroppedItem(data);
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  return (
    <div>
      <div
        draggable
        onDragStart={(e) => handleDragStart(e, 'Перетащено!')}
        style={{ width: '150px', padding: '10px', backgroundColor: '#f0f0f0', cursor: 'grab', marginBottom: '20px' }}
      >
        Перетащи меня!
      </div>

      <div
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        style={{ width: '200px', height: '100px', backgroundColor: '#e0e0e0' }}
      >
        Брось сюда!
      </div>

      {droppedItem && <p>Результат: {droppedItem}</p>}
    </div>
  );
};

export default DragAndDrop;

🔹 Объяснение

1. `draggable`
Устанавливает элемент как "перетаскиваемый".
2. `dataTransfer`
Используется для передачи данных между событиями onDragStart и onDrop.
3. `onDragOver`
Предотвращает поведение по умолчанию, чтобы позволить сброс элемента.
4. Стилизация
Добавляем визуальные подсказки, чтобы пользователю было понятно, где можно сбрасывать объект.

🔹 Использование библиотеки `react-dnd`

Для более сложных сценариев, таких как перетаскивание списков или взаимодействие с несколькими элементами, можно использовать библиотеку react-dnd.

Установка:

npm install react-dnd react-dnd-html5-backend

Пример использования:

import React from 'react';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

const ItemType = 'BOX';

const DraggableItem = ({ id }) => {
  const [, dragRef] = useDrag(() => ({
    type: ItemType,
    item: { id },
  }));

  return (
    <div ref={dragRef} style={{ padding: '10px', backgroundColor: '#f0f0f0', marginBottom: '10px', cursor: 'grab' }}>
      Элемент {id}
    </div>
  );
};

const DropZone = ({ onDrop }) => {
  const [, dropRef] = useDrop(() => ({
    accept: ItemType,
    drop: (item) => onDrop(item.id),
  }));

  return (
    <div
      ref={dropRef}
      style={{ width: '200px', height: '100px', backgroundColor: '#e0e0e0' }}
    >
      Брось сюда!
    </div>
  );
};

const DragAndDropExample = () => {
  const handleDrop = (id) => {
    alert(`Вы перетащили элемент ${id}`);
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <DraggableItem id={1} />
      <DraggableItem id={2} />
      <DropZone onDrop={handleDrop} />
    </DndProvider>
  );
};

export default DragAndDropExample;

🔹 Преимущества использования `react-dnd`

- Удобная работа с множеством элементов.
- Поддержка сложных сценариев (например, перетаскивание между списками).
- Расширенные возможности кастомизации поведения.

🎯 Заключение

React упрощает реализацию drag-and-drop благодаря событиям HTML5, а для сложных задач можно использовать мощные библиотеки вроде react-dnd

ReactJs Daily | #begginers

🚀 Создание интерактивных графиков и диаграмм в React

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

🔹 Почему это важно?

Интерактивные графики:
- делают данные визуально привлекательными,
- помогают пользователям находить скрытые закономерности,
- поддерживают взаимодействие (наведение, клики, масштабирование).

🔹 Популярные библиотеки для визуализации в React

1. Recharts
Простая в использовании библиотека с широким выбором графиков. Подходит для большинства стандартных задач.

Пример использования:

import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';

const data = [
  { name: 'Янв', uv: 400 },
  { name: 'Фев', uv: 300 },
  { name: 'Март', uv: 500 },
];

const MyChart = () => (
  <LineChart width={400} height={300} data={data}>
    <CartesianGrid stroke="#f5f5f5" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Line type="monotone" dataKey="uv" stroke="#ff7300" />
  </LineChart>
);

export default MyChart;
     

2. Chart.js
Очень гибкая библиотека для создания сложных графиков. Подходит для интерактивных приложений.

Пример использования:

import { Line } from 'react-chartjs-2';

const data = {
  labels: ['Янв', 'Фев', 'Март'],
  datasets: [
    {
      label: 'Продажи',
      data: [400, 300, 500],
      borderColor: 'rgba(75, 192, 192, 1)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
    },
  ],
};

const MyChart = () => <Line data={data} />;

export default MyChart;
     

3. D3.js
Мощнейшая библиотека для сложных и кастомных визуализаций. Требует больше знаний, но позволяет реализовать практически любые идеи.

Пример использования:

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';

const BarChart = () => {
  const chartRef = useRef();

  useEffect(() => {
    const data = [10, 20, 30, 40, 50];
    const svg = d3
      .select(chartRef.current)
      .attr('width', 400)
      .attr('height', 200);

    svg
      .selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('x', (_, i) => i * 50)
      .attr('y', (d) => 200 - d * 4)
      .attr('width', 40)
      .attr('height', (d) => d * 4)
      .attr('fill', 'teal');
  }, []);

  return <svg ref={chartRef}></svg>;
};

export default BarChart;

🔹 Фишки интерактивных графиков

- События взаимодействия: Вывод данных при наведении, фильтрация или детализация.
- Динамическое обновление: Применение real-time данных.
- Масштабирование и прокрутка: Особенно полезно для больших наборов данных.
- Анимации: Улучшают пользовательский опыт (например, при загрузке данных).

🔹 Что выбрать?

- Recharts: для быстрых и простых решений.
- Chart.js: для сложных, но стандартных графиков.
- D3.js: для кастомных визуализаций и нестандартных задач.

🎯 Заключение

Интерактивные графики помогут сделать ваше приложение не только красивым, но и полезным😊

ReactJs Daily | #pro

🚀 Динамические поля с React Hook Form и Controller

Если в вашем приложении нужно создавать формы с динамическими полями, то React Hook Form в сочетании с useFieldArray и Controller станет идеальным решением. Этот подход особенно полезен, когда вы работаете с управляемыми компонентами или сторонними библиотеками UI

🔹Что мы будем делать?

- Создадим форму с динамическими полями.
- Используем useFieldArray для управления массивом данных.
- Подключим контролируемые компоненты через Controller.

🔹Реализация

import React from 'react';
import { useForm, useFieldArray, Controller } from 'react-hook-form';

function DynamicForm() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      users: [{ name: '', age: '' }],
    },
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'users',
  });

  const onSubmit = (data) => {
    console.log(data); 
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id} style={{ marginBottom: '10px' }}>
          <Controller
            name={`users.${index}.name`}
            control={control}
            render={({ field }) => (
              <input {...field} placeholder="Имя" />
            )}
          />
          <Controller
            name={`users.${index}.age`}
            control={control}
            render={({ field }) => (
              <input {...field} placeholder="Возраст" type="number" />
            )}
          />
          <button type="button" onClick={() => remove(index)}>
            Удалить
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: '', age: '' })}>
        Добавить поле
      </button>
      <button type="submit">Отправить</button>
    </form>
  );
}

export default DynamicForm;

🔹 Как это работает?

1. useFieldArray
- Позволяет управлять массивами данных, например, добавлять или удалять элементы.
- fields — текущие элементы массива.
- append — добавляет новый объект в массив.
- remove — удаляет элемент по индексу.

2. Controller
- Используется для интеграции управляемых компонентов.
- Автоматически связывает value, onChange и другие свойства с вашим компонентом.

3. Динамические поля
- С каждым вызовом append добавляется новый объект с полями, соответствующими вашему массиву.
- При удалении элемент удаляется из массива и формы.

🔹 Преимущества подхода

- Простота работы с массивами данных.
- Гибкость: подходит для любых сторонних компонентов.
- Производительность: React Hook Form оптимизирован для минимизации ререндеров.

🎯 Заключение

React Hook Form это удобный и мощный инструмент для работы с полями. Это упрощает работу с управляемыми компонентами и добавляет гибкость вашему коду. Попробуйте интегрировать эту функциональность в своих проектах!

ReactJs Daily | #begginers

🚀 Как сделать React-приложение оффлайн-совместимым

Хотите, чтобы ваше React-приложение работало даже без интернета? Это возможно благодаря Service Workers и стратегии кэширования. Оффлайн-совместимость важна для улучшения пользовательского опыта, особенно если ваши пользователи работают в условиях нестабильного соединения.

🔹Основные шаги

1. Используйте Create React App
CRA имеет встроенную поддержку Service Worker, которая активируется при продакшен-сборке.

- Убедитесь, что файл service-worker.js настроен.
- В index.js закомментируйте строку:

serviceWorker.register();

После этого приложение автоматически кэширует статические файлы.

2. Кэширование данных
Для динамических данных используйте библиотеки, такие как:
- Workbox: мощный инструмент для управления кэшированием.
- localStorage/IndexedDB: хранение данных для оффлайн-доступа.

Пример кэширования API-ответов с Workbox:

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.origin === 'https://api.example.com',
  new StaleWhileRevalidate()
);

3. Обработка ошибок сети
Добавьте обработку ошибок, чтобы приложение корректно реагировало на отсутствие соединения. Например, показывайте пользователю уведомление или данные из локального хранилища.

try {
  const response = await fetch('/api/data');
  const data = await response.json();
  setData(data);
} catch (error) {
  setData(localStorage.getItem('offlineData'));
}

4. Добавьте уведомление об оффлайн-режиме
Используйте событие navigator.onLine для отслеживания статуса подключения.

useEffect(() => {
  const updateStatus = () => {
    setIsOnline(navigator.onLine);
  };

  window.addEventListener('online', updateStatus);
  window.addEventListener('offline', updateStatus);

  return () => {
    window.removeEventListener('online', updateStatus);
    window.removeEventListener('offline', updateStatus);
  };
}, []);

🔹 Советы

- Используйте Progressive Web App (PWA) для полного оффлайн-опыта.
- Минимизируйте размер кэшируемых данных для ускорения загрузки.
- Регулярно обновляйте кэш, чтобы пользователи получали актуальные данные.

🎯 Заключение

Оффлайн-совместимость — это шаг к созданию более надежного и удобного приложения. С помощью Service Workers и стратегий кэширования вы можете обеспечить плавную работу даже при отсутствии сети.

ReactJs Daily | #pro

🚀 React Table (TanStack Table): мощный инструмент для работы с таблицами

Привет, друзья! 👋 Если вы работаете с таблицами в React-приложении, вам точно стоит обратить внимание на React Table (ныне TanStack Table). Это гибкая и производительная библиотека для создания динамических и интерактивных таблиц с минимальным кодом.

🔹 Почему TanStack Table?

- Легкость: библиотека не навязывает конкретные стили, позволяя вам кастомизировать всё под свои нужды.
- Гибкость: поддерживает сортировку, фильтрацию, пагинацию, работу с большими данными.
- Высокая производительность: оптимизирована для отображения больших таблиц.
- Расширяемость: можно легко добавить свои плагины и функции.

🔹 Установка

Для начала установим библиотеку:

npm install @tanstack/react-table

🔹 Пример базовой таблицы

import React, { useState } from "react";
import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table'

const defaultData = [
  {
    firstName: 'tanner',
    lastName: 'linsley',
    age: 24,
    visits: 100,
    status: 'In Relationship',
    progress: 50,
  },
  {
    firstName: 'tandy',
    lastName: 'miller',
    age: 40,
    visits: 40,
    status: 'Single',
    progress: 80,
  },
  {
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  },
]

const columnHelper = createColumnHelper()

const columns = [
  columnHelper.accessor('firstName', {
    cell: info => info.getValue(),
  }),
  columnHelper.accessor(row => row.lastName, {
    id: 'lastName',
    cell: info => <i>{info.getValue()}</i>,
    header: () => <span>Last Name</span>,
  }),
  columnHelper.accessor('age', {
    header: () => 'Age',
    cell: info => info.renderValue(),
  }),
  columnHelper.accessor('visits', {
    header: () => <span>Visits</span>,
  }),
  columnHelper.accessor('status', {
    header: 'Status',
  }),
  columnHelper.accessor('progress', {
    header: 'Profile Progress',
  }),
]

function App() {
  const [data, _setData] = useState(() => [...defaultData])

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <div>
      <table>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default App;

🔹 Основные возможности

1. Сортировка
Сортировка доступна из коробки

2. Фильтрация
React Table поддерживает текстовую фильтрацию, выбор из списка и многое другое.

3. Пагинация
Библиотека позволяет легко работать с большими объемами данных через серверную или клиентскую пагинацию.

4. Виртуализация
Для очень больших таблиц можно использовать виртуализацию, чтобы отрисовывать только видимые строки.

🎯 Заключение

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

ReactJs Daily | #begginers

📌 Навигация по каналу ReactJs Daily 🚀

Вот основные категории, чтобы вы быстро находили нужное:

1️⃣ Базовые темы – для новичков: #beginners
2️⃣ Продвинутые темы – глубже в React: #pro
3️⃣ Полезные советы – короткие лайфхаки: #shortinfo
4️⃣ Next.js – современный фреймворк: #nextjs
5️⃣ Тестирование – от основ до практики: #testing
6️⃣ Новости – все обновления и тренды: #news
7️⃣ React 19 – все о новой версии React: #react19

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

Заглядывайте в разделы, изучайте материалы, делитесь с друзьями и продолжайте прокачивать свои React-навыки! 💡

🚀 Монорепозитории vs Микрофронтенды: что выбрать для масштабирования?

Привет, друзья! Сегодня поговорим о двух популярных подходах к организации кода: монорепозиториях и микрофронтендах. Эти архитектуры часто сравнивают, но каждая из них имеет свои плюсы, минусы и идеальные сценарии применения.

🔹 Что такое Монорепозитории?

Монорепозиторий — это единое хранилище, в котором размещен весь код приложения. Этот подход обеспечивает:
- Единое место для всего кода: легко управлять общими компонентами и утилитами.
- Согласованность: единые правила, линтеры и инструменты для всех модулей.
- Простота рефакторинга: изменения в одном месте применяются ко всему проекту.

Но есть нюансы:
- Может замедляться сборка по мере роста репозитория.
- Требует хороших инструментов CI/CD для управления масштабом.

🔹 Микрофронтенды: модульность в действии

Микрофронтенды — это способ разделения фронтенда на независимые модули. Каждый модуль:
Автономен: отдельные команды могут использовать разные технологии.
Меньше зависимости: легко обновлять или изменять функциональность, не затрагивая остальное приложение.
Модульное развертывание: отдельные части можно деплоить независимо.

Но есть и сложности:
Дублирование зависимостей между модулями увеличивает размер бандла.
Интеграция модулей требует продуманного подхода к совместимости и UX.

🔹 Как выбрать?

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

Например:
- Если вы стартап или небольшая команда — начинайте с монорепозитория.
- Для масштабного корпоративного приложения, где над модулями работают десятки команд, лучше подойдут микрофронтенды.

🎯 Заключение

Выбор архитектуры зависит от ваших задач и команды. Главное — оценить масштаб, требования и ресурсы 😊

ReactJs Daily | #begginers

🚀 Хук useOptimistic: Оптимизация UI с прогнозом изменений

Привет! Сегодня расскажем о полезном хуке в React — useOptimistic, который позволяет улучшить пользовательский опыт, прогнозируя изменения данных до их завершения.

🔹Что такое useOptimistic?

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

🔹Когда его использовать?

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

🔹Пример использования

import { useOptimistic, useState, useRef } from "react";
import { deliverMessage } from "./actions.js"; //Promise отправки

function Thread({ messages, sendMessage }) {
  const formRef = useRef();
  async function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    await sendMessage(formData);
  }
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true
      }
    ]
  );

  return (
    <>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

export default function App() {
  const [messages, setMessages] = useState([
    { text: "Hello there!", sending: false, key: 1 }
  ]);
  async function sendMessage(formData) {
    const sentMessage = await deliverMessage(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }
  return <Thread messages={messages} sendMessage={sendMessage} />;
}

В этом примере, когда пользователь вводит сообщение в форму и нажимает кнопку "Send", хук useOptimistic позволяет сообщению сразу появиться в списке с меткой "Sending...", даже до того, как сообщение на самом деле будет отправлено на сервер. Этот «оптимистичный» подход создает впечатление скорости и отзывчивости. Затем форма пытается отправить сообщение в фоновом режиме. Как только сервер подтверждает, что сообщение было получено, метка "Sending..." удаляется.

🔹 Преимущества использования?

1. Отзывчивость интерфейса — изменения происходят немедленно, без задержки.
2. Поддержка асинхронных операций — позволяет обрабатывать операции с сервером без блокировки UI.
3. Гибкость — легко настраиваемая логика для отката изменений в случае ошибки.

Этот хук поможет вам создать более быстрые и приятные интерфейсы, где пользователь будет уверенно работать с данными, не ожидая долгих задержек.

🎯 Заключение

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

В настоящее время хук useOptimistic доступен только в Canary.

ReactJs Daily | #shortinfo

🚀 TanStack Router: мощный инструмент для маршрутизации в React

Привет, друзья! Продолжаем знакомиться с библиотеками от TanStack. Мы уже обсуждали Query и Table, а сегодня поговорим о TanStack Router — инновационном решении для маршрутизации.

🔹 Почему TanStack Router?

- Гибкость: идеально подходит для сложных и вложенных маршрутов.
- SSR и SSG: встроенная поддержка серверного рендеринга и статической генерации страниц.
- Типизация: нативная интеграция с TypeScript упрощает разработку.
- Асинхронность: маршруты могут загружать данные перед отображением, что ускоряет рендеринг страниц.

🔹 Ключевые особенности:

1️⃣ Декларативные маршруты: маршруты описываются как дерево, что удобно для вложенности.
2️⃣ Оптимизация производительности: обновляются только те компоненты, которые зависят от изменения маршрута.
3️⃣ Универсальность: работает как в клиентских, так и в серверных приложениях.

🔹 Пример настройки:

import { createReactRouter, createRouteConfig } from "@tanstack/react-router";

// Конфигурация маршрутов
const routeConfig = createRouteConfig().addChildren([
  { path: "/", component: HomePage },
  { path: "/about", component: AboutPage },
  { path: "/contact", component: ContactPage },
]);

// Создание маршрутизатора
const router = createReactRouter({ routeConfig });

// Использование маршрутизатора
import { RouterProvider } from "@tanstack/react-router";

function App() {
  return <RouterProvider router={router} />;
}

🔹 Когда использовать?

TanStack Router особенно полезен, если вы разрабатываете:
- SPA с динамическими страницами.
- Приложения с поддержкой SSR или SSG (например, в сочетании с Next.js).
- Проекты с высокими требованиями к производительности.

🎯 Заключение

TanStack Router — это мощное решение для тех, кто ищет гибкость и производительность в маршрутизации. Если вам уже нравится экосистема TanStack, обязательно попробуйте этот инструмент!

ReactJs Daily | #shortinfo

🚀 Vite: Быстрый и современный инструмент для разработки

Всем привет! Сегодня расскажем о Vite — инструменте, который сделал революцию в мире фронтенд-разработки. Если вы хотите работать быстрее и без лишних настроек, Vite — то, что нужно.

🔹 Что такое Vite?
Vite — это инструмент для сборки и разработки современных приложений. Название происходит от французского слова vite ("быстро"), и он полностью оправдывает своё название. Его ключевые особенности:
- Использование ES-модулей для быстрого старта.
- Невероятно быстрая замена модулей (HMR).
- Оптимизация для современных браузеров.

🔹 Почему стоит выбрать Vite?

1️⃣ Мгновенный запуск проекта. В отличие от Webpack, он не сканирует весь проект, а загружает только используемые модули.
2️⃣ Скорость обновления. Hot Module Replacement (HMR) позволяет обновлять изменения за миллисекунды.
3️⃣ Поддержка TypeScript, JSX и CSS-модулей из коробки.
4️⃣ Масштабируемость. Подходит как для небольших проектов, так и для крупных приложений.

🔹 Как начать работу?

Запустить проект с Vite проще простого:

npm create vite@latest my-project  
cd my-project  
npm install  
npm run dev  

Vite моментально поднимет сервер разработки, и вы сразу увидите своё приложение в браузере.

🔹 Поддержка фреймворков

Vite поддерживает большинство популярных фреймворков:
- React
- Vue
- Svelte
- Preact
- Lit

🔹 Что делает Vite особенным?

Vite разделяет процесс разработки на две части:
- Сервер разработки: использует нативные ES-модули, что ускоряет запуск и обновление.
- Сборка для продакшена: основана на Rollup, что обеспечивает высокую производительность и минимальный размер файлов.

🔹 Когда использовать Vite?

Если вы создаёте:
- Маленькие проекты: Vite позволяет сократить время настройки.
- Большие приложения: благодаря быстрой сборке и HMR, работа становится комфортной даже с большими кодовыми базами.

🎯 Заключение

Vite — это выбор разработчиков, которые ценят своё время и хотят использовать самые современные технологии. Попробуйте Vite, и вы больше не захотите возвращаться к старым инструментам!

ReactJs Daily | #begginers

🚀 React-Scan: Оптимизация производительности React-приложений

Привет! Сегодня рассмотрим мощный инструмент для анализа производительности ваших React-приложений — React-Scan. Если вы сталкивались с медленными рендерами или неэффективной работой приложения, этот инструмент вам точно пригодится!

🔹 Что такое React-Scan?

React-Scan помогает находить компоненты, которые вызывают избыточные рендеры. Этот инструмент автоматически анализирует приложение, чтобы понять, где вы теряете производительность, и даёт рекомендации для исправления.

🔹 Как это работает?

1️⃣ Сканирование компонентов:
React-Scan анализирует дерево компонентов и определяет узкие места, такие как лишние обновления компонентов.

2️⃣ Мемоизация и оптимизация:
Показывает, где стоит использовать React.memo, useMemo или useCallback для предотвращения ненужных рендеров.

3️⃣ Подсказки по состоянию:
Инструмент помогает обнаружить неправильное использование контекста, пропсов или состояния, из-за чего могут рендериться не только нужные, но и соседние компоненты.

🔹 Ключевые преимущества:

Простота: React-Scan легко интегрируется в существующий проект.
Детальный анализ: Даёт точные рекомендации, позволяя быстрее устранять проблемы.
Эффективность: Снижает нагрузку на приложение, что особенно важно для больших приложений с сложной структурой.

🔹 Пример использования:

React-Scan устанавливается как библиотека, а его вывод интегрируется в devtools, предоставляя графическое отображение рендеров компонентов и их времени выполнения.

🔹 Когда использовать?

Проблемы с производительностью.
Большое количество компонентов или сложные вычисления.
Приложения с интенсивным использованием состояния и пропсов.

🎯 Заключение

React-Scan — это ваш помощник в создании быстрых и отзывчивых приложений. Он поможет превратить медленное приложение в высокопроизводительное за счёт устранения избыточных рендеров и грамотной оптимизации.

you can technically scan ANY website on the web:

npx react-scan@latest https://react.dev

Изучить подробнее 👍

ReactJs Daily | #shortinfo

🚀 Sentry для React: мониторинг ошибок и улучшение производительности

Ошибки неизбежны в любом проекте, но их быстрое обнаружение и исправление — залог успеха.
Sentry — инструмент, который поможет вам анализировать и исправлять баги в React-приложениях.

🔹 Установка и настройка

Установите Sentry:

npm install @sentry/react @sentry/browser

Инициализируйте в основном файле приложения, например, в index.js:

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: 'https://<your-dsn>@o123456.ingest.sentry.io/123456',
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: 1.0, // Процент выборки данных
});

🔹 Интеграция с Error Boundary

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

import React from 'react';
import * as Sentry from '@sentry/react';

const ErrorFallback = () => <h1>Упс! Произошла ошибка.</h1>;

const MyComponent = Sentry.withErrorBoundary(Component, {
  fallback: <ErrorFallback />,
});

export default MyComponent;

Теперь ошибки внутри будут отправляться в Sentry, а пользователи увидят fallback-интерфейс.

🔹 Отслеживание ошибок и событий

Можно явно захватывать ошибки или события:

import * as Sentry from '@sentry/react';

try {
  throw new Error("Пример ошибки");
} catch (error) {
  Sentry.captureException(error); // Отправляет отчет в Sentry
}

Sentry.captureMessage("Ключевое событие", "info");

🔹 Преимущества Sentry

1️⃣ Мгновенное уведомление об ошибках. Получайте уведомления через email, Slack и другие каналы.
2️⃣ Детальная аналитика. Логи, сессии пользователей и версия приложения помогают быстрее находить проблему.
3️⃣ Производительность. Sentry показывает медленные участки приложения, позволяя оптимизировать их.
4️⃣ Удобная интеграция. Подходит как для простых приложений, так и для сложных архитектур.

🎯 Заключение

Sentry упрощает мониторинг, обработку ошибок и анализ производительности в React-приложениях. Используйте этот инструмент, чтобы минимизировать баги и сделать приложение стабильным.

ReactJs Daily | #shortinfo

🚀 Tailwind CSS в React: плюсы, минусы и использование

Привет, друзья! 👋 Сегодня поговорим про Tailwind CSS — мощный инструмент для стилизации, который использует утилитарный подход.

🔹 Что это такое?

Tailwind CSS — это фреймворк, в котором вы создаёте стили с помощью готовых классов. Каждый класс отвечает за конкретный стиль: отступы, цвета, тени и многое другое. Это делает разработку быстрой и гибкой.

🔹 Преимущества Tailwind CSS

1️⃣ Быстрое создание UI:
Вы можете стилизовать React-компоненты прямо в JSX:

<button className="bg-blue-500 text-white px-4 py-2 rounded">
  Кнопка
</button>

2️⃣ Консистентный дизайн:
Благодаря встроенным переменным для отступов, цветов и шрифтов дизайн становится единообразным.

3️⃣ Минимизация CSS:
Tailwind удаляет неиспользуемые стили на этапе сборки, оптимизируя итоговый файл.

4️⃣ Легкая настройка:
С помощью tailwind.config.js вы можете добавить свои цвета, шрифты и другие параметры.

🔹 Недостатки Tailwind CSS

1️⃣ Загромождение JSX-кода:
Множество классов могут затруднять чтение:

<div className="bg-white p-6 shadow-md rounded-md flex items-center">
  <span className="text-gray-700 font-semibold">Пример</span>
</div>

2️⃣ Изучение:
Нужно время, чтобы освоить обширный набор классов и их комбинации.

3️⃣ Зависимость:
Переключиться на другой CSS-фреймворк сложно из-за плотной интеграции стилей в компоненты.

🔹 Tailwind в React: пример компонента

import React from "react";

export default function Card({ title, description }) {
  return (
    <div className="bg-gray-100 p-4 rounded shadow-lg">
      <h2 className="text-lg font-bold text-gray-800">{title}</h2>
      <p className="text-gray-600">{description}</p>
    </div>
  );
}

В этом примере используется утилитарный подход для быстрого создания стильного компонента.

🔹 Когда использовать Tailwind в React?

Если проект требует быстрого прототипирования.
Если нужно единообразие в дизайне без написания большого количества CSS.
Если вы работаете в команде, где важна предсказуемость стилей.

🎯 Заключение

Tailwind CSS — это мощный инструмент для ускорения разработки интерфейсов, особенно в больших командах. Однако его использование требует опыта и понимания утилитарного подхода.

ReactJs Daily | #begginers

🚀 Что такое RTK Query и зачем он нужен?

Всем привет! 👋 Сегодня поговорим про RTK Query — это мощный инструмент для управления состоянием и получения данных в приложениях на основе React, который входит в состав Redux Toolkit. Он значительно упрощает процесс работы с API и обеспечивает разработчиков множеством полезных возможностей.

🔹 Зачем использовать RTK Query?

1. Упрощение взаимодействия с API: RTK Query предоставляет простой и удобный способ для выполнения асинхронных запросов к REST или GraphQL API. Вам не нужно вручную обрабатывать действия, редюсеры и состояние загрузки — все это делается автоматически.

2. Эффективное кеширование: RTK Query автоматически кэширует результаты запросов и работает с ними, чтобы минимизировать количество ненужных запросов к серверу. Это улучшает производительность приложения и обеспечивает мгновенное отображение данных.

3. Генерация типов TypeScript: Если вы используете TypeScript, RTK Query позволяет автоматически генерировать типы для запросов и ответов, что обеспечивает большую безопасность типизации.

4. Интеграция с Redux: Поскольку RTK Query разработан как часть Redux Toolkit, он легко интегрируется с уже существующими Redux-приложениями и позволяет использовать привычные парадигмы управления состоянием.

5. Поддержка "периодического обновления": RTK Query предоставляет возможность настраивать периодическое обновление данных, что позволяет держать информацию актуальной без дополнительных операций со стороны разработчика.

🔹 Как начать использовать RTK Query?

Чтобы начать использовать RTK Query, вам нужно установить Redux Toolkit:

npm install @reduxjs/toolkit react-redux

Затем создайте «API slice», который определяет, как будет происходить взаимодействие с вашим API:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => 'posts',
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
    }),
  }),
});

export const { useGetPostsQuery, useAddPostMutation } = api;

После этого добавьте редюсер API в ваш Redux Store:

import { configureStore } from '@reduxjs/toolkit';
import { api } from './services/api';

export const store = configureStore({
  reducer: {
    // Добавьте редюсеры вашего API
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});

Теперь вы можете использовать хуки, предоставляемые RTK Query, в ваших компонентах:

import React from 'react';
import { useGetPostsQuery, useAddPostMutation } from './services/api';

const Posts = () => {
  const { data: posts, error, isLoading } = useGetPostsQuery();
  const [addPost] = useAddPostMutation();

  const handleAddPost = async () => {
    await addPost({ title: 'Новое название', content: 'Содержимое поста' });
  };

  if (isLoading) return <div>Загрузка...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Посты</h1>
      <button onClick={handleAddPost}>Добавить пост</button>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

🎯 Заключение

RTK Query — это отличный инструмент для разработчиков, который делает работу с асинхронными запросами простой и эффективной. Благодаря автоматизации многих рутинных задач, таким как кеширование и обработка загрузки, вы можете сосредоточиться на создании ценного функционала для своих пользователей.

ReactJs Daily | #begginers