Что такое 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 (строка, массив, объект и т.д.). Узнать больше о Редакс можно здесь.

Содержание туториала по React JSX — это расширение синтаксиса для JavaScript, позволяющее писать HTML-подобную разметку внутри файла JavaScript. Хотя есть и другие способы написания компонентов, большинство разработчиков React предпочитают лаконичность JSX, и большинство кодовых баз используют его.

JSX: добавление разметки в JavaScript

Интернет был построен на HTML, CSS и JavaScript. В течение многих лет веб-разработчики хранили контент в HTML, дизайн в CSS и логику в JavaScript — часто в отдельных файлах. Контент был размечен внутри HTML, а логика страницы жила отдельно в JavaScript. Но по мере того, как Интернет становился все более интерактивным, содержание все больше определялось логикой. JavaScript отвечал за HTML. Вот почему в React логика рендеринга и разметка живут в одном месте — в компонентах. Сохранение логики рендеринга кнопки и разметки вместе гарантирует их синхронизацию друг с другом при каждом редактировании. И наоборот, несвязанные детали, такие как разметка кнопки и разметка боковой панели, изолированы друг от друга, что делает более безопасным изменение любой из них по отдельности. Каждый компонент React — это функция JavaScript, которая может содержать некоторую разметку, которую React отображает в браузере. Компоненты React используют расширение синтаксиса под названием JSX для представления этой разметки. JSX очень похож на HTML, но немного строже и может отображать динамическую информацию. Лучший способ понять это — преобразовать некоторую разметку HTML в разметку JSX. JSX и React — это две разные вещи. Они часто используются вместе, но вы можете использовать их независимо друг от друга. JSX — это расширение синтаксиса, а React — это библиотека JavaScript.

Преобразование HTML в JSX

Предположим, что у вас есть некоторый (совершенно правильный) HTML:

<h1>Todos</h1>
<img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
<ul>
  <li>Learn JavaScript</li>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
</ul>

И вы хотите поместить его в свой компонент:

export default function TodoList() {
  return (
    // ???
  )
}

Если вы скопируете и вставите его как есть, он не будет работать.

// App.js

export default function TodoList() {
  // Этот код не будет работать
  return (
    <h1>Todos</h1>
    <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
    <ul>
      <li>Learn JavaScript</li>
      <li>Learn HTML</li>
      <li>Learn CSS</li>
    </ul>
  );
}

// App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:4)

// App.js: Смежные элементы JSX должны быть заключены в закрывающий тег. Вам нужен фрагмент JSX <>...</>? (5:4)

Это потому, что JSX строже и имеет несколько больше правил, чем HTML. Если вы прочитали сообщения об ошибках выше, они помогут вам исправить разметку, или вы можете следовать приведенному ниже руководству.

Правила JSX

1. Возвращать один корневой элемент

Чтобы вернуть несколько элементов из компонента, оберните их одним родительским тегом. Например, вы можете использовать <div>:

<div>
  <h1>Todos</h1>
  <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
  <ul>
    ...
  </ul>
</div>

Если вы не хотите добавлять в разметку лишний <div>, вы можете вместо этого написать <> и </>:

<>
  <h1>Todos</h1>
  <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
  <ul>
    ...
  </ul>
</>

Этот пустой тег называется фрагментом (Fragment). Фрагменты позволяют группировать элементы, не оставляя следов в HTML-дереве браузера.

Почему необходимо обернуть несколько тегов JSX?

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

2. Закрывать все теги

JSX требует, чтобы теги были закрыты явно: самозакрывающиеся теги, такие как <img>, должны стать <img />, а теги-обертки, такие как <li>апельсины, должны быть записаны как <li>апельсины</li>.

3. Пишите все в camelCase

JSX превращается в JavaScript, а атрибуты, написанные в JSX, становятся ключами объектов JavaScript. В ваших собственных компонентах вам часто потребуется считывать эти атрибуты в переменные. Но JavaScript имеет ограничения на имена переменных. Например, их имена не могут содержать тире или быть зарезервированными словами, такими как class. Вот почему в React многие атрибуты HTML и SVG записываются в camelCase. Например, вместо stroke-width вы используете strokeWidth. Поскольку class является зарезервированным словом, в React вместо этого вы пишете className, названное в честь соответствующего DOM свойства:

<img src="https://example.com/userpic.jpg" alt="userpic" className="photo" />

Совет: используйте конвертер JSX

Преобразование всех этих атрибутов в существующую разметку может быть утомительным. Рекомендуется использовать конвертер для перевода существующих HTML и SVG в JSX. Конвертеры очень полезны на практике, но все же стоит понимать, что происходит, чтобы вы могли комфортно писать JSX самостоятельно. Вот окончательный результат:

export default function TodoList() {
  return (
    <>
      <h1>Todos</h1>
      <img
        src="https://example.com/userpic.jpg"
        alt="userpic"
        className="photo"
      />
      <ul>
        <li>Learn JavaScript</li>
        <li>Learn HTML</li>
        <li>Learn CSS</li>
      </ul>
    </>
  );
}

Резюме

Теперь вы знаете, почему существует JSX и как его использовать в компонентах:

• React компоненты группируют логику рендеринга вместе с разметкой, потому что они связаны.
• JSX похож на HTML с некоторыми отличиями. Вы можете использовать конвертер, если вам нужно.
• Сообщения об ошибках часто укажут вам правильное направление для исправления разметки.