# react конфигурация,минивыжимка By [Untitled](https://paragraph.com/@0x9da0ffdbc3bf74de891bc3a0b416ea0f8a6c1435) · 2024-07-17 --- Redux - это библиотека для управления состоянием приложения. Она основана на трех принципах: 1. Единственный источник правды: все состояние приложения хранится в одном объекте. 2. Состояние только для чтения: единственный способ изменить состояние - отправить действие. 3. Изменения делаются с помощью чистых функций: редюсеры - это чистые функции, которые принимают предыдущее состояние и действие, и возвращают новое состояние. Redux Thunk: Redux Thunk - это middleware для Redux, который позволяет работать с асинхронной логикой. С его помощью вы можете: 1. Отправлять функции вместо простых объектов действий. 2. Откладывать отправку действий. 3. Отправлять действия, если выполняются определенные условия. Ключевая терминология: 1. Store: объект, который хранит состояние приложения. 2. Action: простой объект, описывающий, что произошло в приложении. 3. Reducer: чистая функция, которая принимает текущее состояние и действие, и возвращает новое состояние. 4. Dispatch: метод store, который используется для отправки действий. 5. Middleware: функции, которые обрабатывают действия до того, как они достигнут редюсера. 6. Thunk: функция, которая может быть отправлена как действие с помощью Redux Thunk. 7. Selector: функция, которая извлекает определенные данные из состояния. * * * Файл slice (срез) - это концепция, введенная в Redux Toolkit для упрощения работы с Redux. Slice объединяет логику редюсеров и действий в одном месте. * * * ### Redux Thunk, Redux Saga Redux Thunk: 1. Простота: Легко изучить и использовать. 2. Функции: Позволяет отправлять функции вместо простых объектов действий. 3. Асинхронность: Хорошо подходит для простых асинхронных операций. 4. Контроль потока: Ограниченные возможности для сложного контроля потока выполнения. 5. Тестирование: Относительно просто тестировать. React Saga: 1. Сложность: Имеет более крутую кривую обучения. 2. Генераторы: Использует генераторы JavaScript для управления потоком выполнения. 3. Эффекты: Предоставляет набор эффектов для сложных асинхронных операций. 4. Контроль потока: Мощные возможности для управления сложными потоками асинхронных операций. 5. Тестирование: Легко тестировать благодаря предсказуемости генераторов. 6. Отмена операций: Встроенная поддержка отмены длительных операций. 7. Параллелизм: Удобные инструменты для работы с параллельными задачами. Основные отличия: 1. Парадигма: Thunk использует функции, Saga использует генераторы. 2. Сложность: Saga более мощная, но и более сложная в освоении. 3. Масштабируемость: Saga лучше подходит для крупных приложений со сложной логикой. 4. Тестируемость: Saga обычно легче тестировать из-за своей декларативной природы. 5. Функциональность: Saga предоставляет больше встроенных инструментов для сложных сценариев. // Redux thunk export const fetchUser = (userId) => async (dispatch) => { dispatch({ type: 'FETCH_USER_START' }); try { const response = await fetch(`/api/users/${userId}`); const userData = await response.json(); dispatch({ type: 'FETCH_USER_SUCCESS', payload: userData }); } catch (error) { dispatch({ type: 'FETCH_USER_ERROR', payload: error.message }); } }; // Redux saga export const fetchUser = (userId) => async (dispatch) => { dispatch({ type: 'FETCH_USER_START' }); try { const response = await fetch(`/api/users/${userId}`); const userData = await response.json(); dispatch({ type: 'FETCH_USER_SUCCESS', payload: userData }); } catch (error) { dispatch({ type: 'FETCH_USER_ERROR', payload: error.message }); } }; * * * ### Vite Vite - это современный инструмент сборки, разработанный Evan You (создателем Vue.js). Он предназначен для быстрой разработки и сборки современных веб-приложений. Основные особенности Vite: 1. Быстрый старт: Использует нативные ES-модули браузера для мгновенного запуска сервера разработки. 2. Быстрая сборка: Использует Rollup для оптимизированной сборки продакшн-версии. 3. Поддержка TypeScript из коробки. 4. Встроенная поддержка CSS, JSON, и статических ресурсов. 5. Оптимизация для production: Автоматическая предварительная сборка зависимостей. Базовый конфиг Vite (vite.config.js): import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], server: { port: 3000 }, build: { outDir: 'build' } }) Отличия от Webpack: 1. Скорость: Vite значительно быстрее в режиме разработки, так как не требует полной сборки для старта. 2. Конфигурация: Vite требует меньше конфигурации и проще в настройке. 3. Модули: Vite использует нативные ES-модули в разработке, Webpack использует свою систему модулей. 4. Экосистема: Webpack имеет более обширную экосистему плагинов и лоадеров. Сравнение скорости: * Запуск сервера разработки: Vite обычно запускается за секунды, в то время как Webpack может занимать десятки секунд. * Обновление при изменениях: Vite обновляет только измененные модули, что делает Hot Module Replacement (HMR) очень быстрым. * Сборка для продакшн: Vite и Webpack показывают сопоставимую производительность. CRACO с Webpack: CRACO (Create React App Configuration Override) - это инструмент для настройки Create React App без необходимости его "извлечения" (eject). Отличия CRACO от Vite: 1. Базовая технология: CRACO работает поверх Webpack, в то время как Vite использует свой подход. 2. Экосистема: CRACO позволяет использовать всю экосистему Webpack без извлечения CRA. 3. Конфигурация: CRACO требует дополнительного конфигурационного файла (craco.config.js) для настройки. 4. Скорость разработки: Vite обычно быстрее в режиме разработки. Пример конфигурации CRACO (craco.config.js): module.exports = { webpack: { alias: { '@': path.resolve(__dirname, 'src'), }, plugins: [ // дополнительные плагины Webpack ], }, jest: { configure: { // настройки Jest }, }, }; Выбор между Vite, Webpack и CRACO зависит от ваших конкретных потребностей: * Vite отлично подходит для новых проектов, особенно если важна скорость разработки. * Webpack (с или без CRACO) может быть лучшим выбором для существующих проектов или когда требуется специфическая конфигурация и широкая экосистема плагинов. * CRACO полезен, когда вы хотите настроить проект Create React App без извлечения конфигурации. `yarn add -D vite-plugin-svgr` // vite-env.d.ts /// declare module '*.svg?react' { import React from 'react'; const SVGComponent: React.FC>; export default SVGComponent; } // vite config import svgr from 'vite-plugin-svgr'; import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path'; import envCompatible from 'vite-plugin-env-compatible'; import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'; import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'; export default defineConfig({ plugins: [ react(), svgr({ svgrOptions: { icon: true, } }), envCompatible() ], server: { port: 3000 }, // root: 'public', build: { outDir: 'build', }, define: { global: {}, process: {} }, resolve: { alias: { app: '/src/app', entities: '/src/entities', features: '/src/features', pages: '/src/pages', shared: '/src/shared', widgets: '/src/widgets', process: 'process/browser' }, }, optimizeDeps: { esbuildOptions: { // Node.js global to browser global polyfills define: { global: 'globalThis' }, plugins: [ NodeGlobalsPolyfillPlugin({ buffer: true }), NodeModulesPolyfillPlugin() ] } } }) --- *Originally published on [Untitled](https://paragraph.com/@0x9da0ffdbc3bf74de891bc3a0b416ea0f8a6c1435/react)*