Как мне вызвать actioncreator с подробной информацией об отображаемом элементе DOM в Flux?

Мой вариант использования:

  • ComponentA отображает один компонент ReactQuill (похожий на текстовое поле)
  • Высота DOM ReactQuill используется другими компонентами
  • Я хочу, чтобы ComponentA вызывал ActionCreator с высотой DOM ReactQuill. Затем это обновит хранилище, ответственное за хранение этих данных.
  • Я обнаружил, что есть три сценария, когда высота ReactQuill изменится.

Это:

  1. Когда пользователь вводит в поле
  2. Когда меняется ширина браузера
  3. При первоначальном создании

У меня 1 и 2 работают. Но я не могу понять, как вызвать создателя действия при первоначальном создании?

Я попытался вызвать его в componentDidUpdate, но он выдает ошибку, говоря, что он находится в середине отправки.

Любые идеи? Или я неправильно к этому подхожу?

Ваше здоровье


reactjs flux reactjs-flux
person Lango    schedule 23.08.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Есть ли обратный вызов, который вы можете использовать при инициализации вашего редактора? Например, если вы используете Quill (хотя я никогда не использовал его сам и не тестировал этот метод), я не смог найти обратный вызов для инициализации, но я предполагаю, что вы устанавливаете содержимое при инициализации, для которого есть событие, которое вы можете прослушать: text-change (здесь: http://quilljs.com/docs/events/#text-change)

editor.on('text-change', function(delta, source) {
  if (source == 'api') { // Maybe you want to dispatch action only when set through API
    Actions.updateEditorHeight(...);
  }
});

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

componentDidMount() {
  // init editor, perhaps load saved data
  setTimeout(function() {
    Actions.updateEditorHeight(...);
  }, 0);
}
person franky    schedule 23.08.2015
comment
Событие изменения текста не запускается при создании. Как мне использовать setTimeout? Я пытался сделать это, но я все еще получал ошибку. - person Lango; 23.08.2015
comment
Я имел в виду, что вы, вероятно, сами устанавливаете содержимое при инициализации редактора (например, для загрузки сохраненных данных). Если нет, вы также можете инициализировать его пустым текстом, чтобы он действительно срабатывал при создании. Для setTimeout я добавлю пример к ответу - person franky; 23.08.2015
comment
SetTimeout сработал. Чувствуется немного грязный, но я не могу придумать другой способ обойти это. Спасибо за помощь - person Lango; 24.08.2015