Как вы смешиваете componentDidMount() с помощью реакции-redux connect()?

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

Итак, я думал, что у меня есть два компонента: тупой компонент списка элементов и оберточный "презентационный" компонент, который каким-то образом удаляет удаленный запрос при рендеринге немого компонента с пустым списком элементов из состояния.

Я знаю, как запустить исходный удаленный запрос: используйте componentDidMount().

и я знаю, как обрабатывать отправку/соединение: я хочу использовать что-то вроде:

const OuterWrapper = connect ( mapStateToProps, mapDispatchToProps ) (ItemList)

но как мне заставить эти вещи играть вместе? используя connect(), кажется, что вещи недостижимы. Я хочу асинхронно запускать запрос API, а затем каким-то образом отправить рассылку (updateItemList (items)), чтобы сообщить миру, что в состояние добавляются новые элементы.

EDIT:

Я нашел это: https://github.com/JamieDixon/react-lifecycle-component но я не понимаю пример использования, как до, так и после. В более длинном случае почему "getAllTehDatas" ссылается дважды? Почему это в mapDispatchToProps явно без пары ключ: значение? Почему это вообще необходимо, если компонентDidMount() вызывает его? И что вы будете делать, если этот метод должен использовать dispatch()?

Ответ 1

Во-первых, о вашем редактировании, что компонент в этом репо предназначен для передачи функций компоненту в качестве реквизита. Они будут выполняться всякий раз, когда выполняются React lifecycle methods. Это полезно по причинам. Но эти причины объясняются в этом репо и не имеют отношения к вашему вопросу.

Кроме того, вы видели это:

const mapDispatchToProps = { getAllTehDatas };

Это условное обозначение ES6. Это просто означает:

const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };

То есть имя свойства совпадает с именем переменной. Потому что это такая общая операция, кто-то умный придумал эту стенографию. Это может быть очень запутанным, если вы не знаете об этом. Вы должны прочитать об es6.

Onward.

Существует ряд концепций, которые не являются четко очерченными. Немые компоненты. Интеллектуальные компоненты. Контейнерные компоненты. Презентационные компоненты. Подключенные компоненты. Чистые функциональные компоненты. Это много.

Контейнерные компоненты - это интеллектуальные компоненты, а презентационные компоненты - немые компоненты.

Иногда немые компоненты немного умны. Возможно, у них есть анимация на мыши. Они могут даже иметь состояние.

Чистые функциональные компоненты - это просто функция. Так что никаких методов и никакого состояния. Это означает только реквизит. Поскольку не может быть состояния или дополнительной логики, чистые функциональные компоненты всегда являются презентационными.

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

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

Контейнерные компоненты должны определять, что происходит. Это где логика забивается. Это скорее концепция React, чем концепция Redux.

Подключенные компоненты создаются с помощью connect. Когда это называется, мы передаем некоторые функции. mapStateToProps и mapDispatchToProps.

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

mapDispatchToProps может делать все, что нужно для передачи функций, которые используются непосредственно как обработчики событий. Часто мы пропускаем создателей связанных действий, которые обычно уже делают все, что должен делать обработчик. Но мы можем передать любую функцию и дать ей любое имя. Поэтому мы можем назвать его onClick и передать любую функцию, которая нам нравится. Вы также можете создавать создателей сложных действий с помощью Redux-Thunk, чтобы сделать любого обработчика событий создателем умного действия. У Thunked action creators есть доступ к отправке и состоянию.

В приведенных выше параграфах описывается интересный момент: HOC, созданный connect с помощью наших mapStateToProps и mapDispatchToProps, может быть легко превращен в полный интеллектуальный компонент, а завернутый компонент может быть полностью презентационным, даже если полученный HOC должен делать умные вещи.

Или получите это: вы можете connect уже подключенный компонент. Разум дует, конечно. Полезно ли это сделать? Конечно, может быть. Компонент может нуждаться в некоторых общих данных из состояния, где бы он ни использовался. Вы connect к этим данным. Получаемый компонент может быть затем connect ed для данных, специфичных для места, где он использовался в другом месте. Общие? Нет. Полезно? Да!

Вы также можете обернуть презентационный компонент в компонент контейнера, который затем обернут connect. Это может быть то, что вы ищете. Затем вы можете использовать componentDidMount для выполнения выборки в компоненте контейнера.

Но презентационные компоненты только полезно отделяются от их умств по двум причинам:

Повторное использование
Тестируемость

Если вам не нужно ни то, то вы не должны разделять их. Зачем усложнять вещи без выгоды?

Кроме того, используйте componentDidMount, а не componentWillMount. Последний также работает на стороне сервера, если вы используете универсальные компоненты. Вы не хотите, чтобы ваш выбор выполнялся на сервере.

Обратите внимание, что хотя подключенный компонент явно является оберткой, вы не должны так думать об этом. Подумайте об этом как о подключенной версии оригинала. Обертка - это просто деталь реализации. Кроме того, обертка создается и поддерживается React-Redux, а ее недрами не обманывать. Это означает, что вы не можете изменить componentDidMount обертки или любую другую деталь. И когда я говорю, что не могу, я имею в виду, что ты полностью можешь, но на самом деле не должен.

Чтобы повторить, я рекомендую понимать React, Redux и React-Redux. Они хорошо сочетаются, но это не одно и то же.

После того как вы поняли концепции, вы просто делаете то, что считаете лучшим. Сделайте свои собственные правила.

Ответ 2

Этот ответ, который я сделал некоторое время назад, дает вам пример того, как правильно использовать соединение и совершать вызовы действий в компоненте. Единственное различие заключается в том, что он в componentWillMount для меня: P