WedX - журнал о программировании и компьютерных науках

Реакция: Является ли размещение действий, которые обновляют магазины, в ComponentWillMount плохой идеей?

Инструменты: Reactjs 0.14.0, React-Router 1.0.0, Vanilla Flux.

Итак, у меня есть действие, отправляемое в хранилище в моем componentWillMount, и теперь оно выдает ошибку:

"Неперехваченная (в обещании) ошибка: нарушение инварианта: Dispatch.dispatch(...): не удается выполнить отправку в середине отправки"

Вся моя диспетчеризация должна была быть выполнена за годы до того, как был сделан этот вызов, но в конце концов я понял, что мой окончательный emitChange() не вернется, пока, по-видимому, не будет вызван весь повторный рендеринг emitChange().

Например, потоки кода 1-4:

1) Я меняю состояние в InitStore, что InitComplete теперь верно

InitStore.js

case ActionTypes.INIT_COMPLETE:
    _initComplete();
    InitilizationStore.emitChange();
    // Not getting past here till all re-rendering was done
    break;

2) Теперь это вызовет изменение рендеринга

app.js

if(this.state.initComplete) {
    return (
        <Main />
    );
}else{ 
   return (<div className="main-container">Loading...</div>);
}

3) В дочернем компоненте Main будет вызов для сохранения параметра маршрута в componentWillMount

Threadlist.js

componentWillMount: function(){
    var { threadID } = this.props.params
    ThreadActionCreators.setCurrentThread(threadID);//Invariant!!!No!!
},

4)Но похоже InitStore до сих пор не вернулся из emitChange()!

Вопрос. Значит, вообще не следует обновлять хранилища в компонентеWillMount?

reactjs react-router flux reactjs-flux
17.11.2015

Ответы:


1

«Невозможно отправить в середине отправки» возникает, когда действие синхронно запускает другое действие. Действия предназначены для уведомления об изменении данных, при этом вся результирующая логика обрабатывается хранилищем без необходимости запуска последующих дальнейших действий, поэтому действие, запускающее другое действие, может указывать на то, что вы делаете что-то неправильно.

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

componentWillMount: function(){
    var { threadID } = this.props.params
    window.setTimeout(
        function () {ThreadActionCreators.setCurrentThread(threadID);},
        0
    );
},

В качестве альтернативы, если вы предпочитаете, вы можете поместить вызов отправки внутри setCurrentThread() во время тайм-аута, любой из них должен работать.

18.11.2015
  • поэтому действие, запускающее другое действие, может означать, что вы делаете что-то не так. --- справедливости ради: это искусственное ограничение, и реализации потока не обязаны ему следовать (поскольку с ним нет реальной технической проблемы). 18.11.2015
  • Могу предложить. Я согласен с тем, что обычно это не проблема, и с этим неприятно иметь дело, но я понимаю, почему это стоит хотя бы отметить как потенциальную проблему. 18.11.2015
  • это стоит по крайней мере отметить как потенциальную проблему --- это правильно. Но почему-то вместо предупреждения решили отрицать :-) А дело в том, что обычно от этого страдают хорошие парни, так как плохие парни все равно обработают setTimeout ;-) 18.11.2015
  • Возможно, стоит отметить, что эта проблема исчезнет, ​​если вы завернете свои рассылки в React batchedUpdates; см. эту страницу и этого теста для примера. 18.11.2015
    • Новые материалы
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    Для любых предложений по сайту: [email protected]