Что такое payload в Redux

Payload (пэйлоад, полезная нагрузка) — это неофициальное, принятое сообществом соглашение об именовании поля, которое содержит фактические данные в объекте действия (action) в Redux. В официальной документации говорится только, что действие Redux должно быть простым объектом и должно иметь имя действия, представленное строкой: Этот простой объект, который описывает изменение, которое применяется в нашем приложении. Действия должны иметь поле для типа (type), указывающее тип выполняемого действия. Типы могут быть определены как константы и импортированы из другого модуля. Лучше использовать строки для текста, чем символы, потому что строки сериализуются. Помимо типа, структура объекта действия зависит только от программиста.

Лучшие практики сообщества

Многие вещи не стандартизированы в Redux, поэтому у вас есть максимальная гибкость, чтобы делать все по-своему, но, поскольку большинство из нас не хотят придумывать индивидуальное решение для каждой мелочи повседневной детали, сообщество имеет тенденцию устанавливать лучшие практики. Чтобы отделить этот тип от обычных данных, используется свойство payload. Теперь вопрос в том, что должно входить в эту полезную нагрузку (payload). Необязательное свойство payload МОЖЕТ иметь значение любого типа. Он представляет собой полезную нагрузку действия (redux action). Любая информация о действии, которая не является type или состоянием действия, должна быть частью поля payload. Например:

const someAction = {
  type: "Test",
  payload: {
    user: "Test User",
    age: 25
  },
}

Это общепринятое соглашение о том, чтобы иметь тип и полезную нагрузку для действия. Полезной нагрузкой может быть любой допустимый тип JS (строка, массив, объект и т.д.). Узнать больше о Редакс можно здесь.

Использование link со ссылкой на шрифт

Можно ссылаться на любые шрифты, размещенные в Интернете, используя тег <link> внутри HTML-файла. Давайте рассмотрим пример применения Google шрифтов с помощью тега <link>.

• Перейдите на fonts.google.com
• Выберите понравившийся шрифт и скопируйте его имя

• Вставьте в index.html линк со ссылкой на шрифт. Если ваше приложение создано с помощью create-react-app, вы найдете index.html в папке public.

Например, подключение шрифта Dancing Script будет выглядеть следующим образом.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">

• Настройте css класс с помощью веб-шрифта в таблице стилей, указав font-family: 'Font Name', например, в index.css:

.font-dancing-script {
  font-family: 'Dancing Script';
}

• Примените селектор в любом React компоненте

// App.jsx

import './App.css';

function App() {
  return (
    <div className="font-dancing-script">
      <p>Hello</p>
    </div>
  );
}

export default App;

Использование загруженного шрифта с @font-face

В некоторых ситуациях подключение шрифтов онлайн может быть недоступно или запрещено. Классический пример: пользователи вашего приложения используют интранет и имеют ограниченный доступ к Интернету. В таких случаях шрифты должны быть загружены локально и упакованы в приложение. @font-face — это CSS правило для определения шрифта путем указания шрифта с помощью URL-адреса.

• Создайте папку с именем fonts в src.
• Загрузите необходимые шрифты в папку src\fonts. В этом примере мы загрузили шрифт Dancing Script.

• Затем импортируйте шрифты в файл index.js

// index.js

import './fonts/DancingScript/DancingScript-Bold.ttf';

• В index.css добавьте

@font-face {
  font-family: 'DancingScript';
  src: local('DancingScript'),
    url('./fonts/DancingScript/DancingScript-Bold.ttf') format('truetype');
  font-weight: bold;
}

• Теперь добавьте в файл index.css имя класса, в котором используется этот font family.

.font-dancing-script {
  font-family: "DancingScript";
}

• Используйте это имя класса в своем React компоненте.

// App.jsx

import './App.css';

function App() {
  return (
    <div className="font-dancing-script">
      <p>Hello</p>
    </div>
  );
}

export default App;