Отправка двух действий

Question

У меня есть компонент, который имеет метод _handleOnClick. Когда вызывается функция _handleOnClick, она отправляет действие через updateCanDrinkFlag, которое обновляет canDrink в избыточном состоянии, которое, в свою очередь, обновляет this.props.canDrink. Кроме того, отправляется другое действие, если оно соответствует условной проверке через updateCanDriveFlag, которая обновляет canDrive в избыточном состоянии, что, в свою очередь, обновляет this.props.canDrive.

Приведенный ниже код работает должным образом: если изначально this.props.canDrink равно true, а this.props.canDrive равно true после нажатия, this.props.canDrink равно false, а this.props.canDrive равно false

, если бы этот код мог не работать ? Например, в моем условном выражении я проверяю this.props.canDrink === true, то есть значение, которое изначально было до запуска updateCanDrinkFlag. Будет ли случай, когда updateCanDrinkFlag завершается (меняет мое состояние приращения и this.props.canDrink изменяется на false) до выполнения оператора if?

export default class Item extends PureComponent {
    //this.props.canDrink is true
    //this.props.canDrive is true

    _handleOnClick = () => {  
        //updates canDrink to false          
        updateCanDrinkFlag({
            id,
            value: !this.props.canDrink,
        });

        // if updating canDrink to false and canDrive is true, update canDrive to false too
        if (this.props.canDrink && this.props.canDrive) {
            updateCanDriveFlag({
                id,
                value: false,
            });
        }
    }

...

}

Answer 1

Короткий ответ - нет. Ваш код технически в порядке. Но я должен прокомментировать, что ваш код не является оптимальным по стилю.

На вашем месте я бы сделал логи синхронизации c (если canDrink == false && canDrive == true, то canDrive = false) внутри редуктора , вместо того, чтобы запускать другое действие здесь.

Ваш текущий код сверяется с:

if (this.props.canDrink && this.props.canDrive) { ... }

, что на самом деле:

if (this.props.canDrink /* which implies nextProps.canDrive == false */ 
    && this.props.canDrive
) { ... }

ЭТО ПРОСТО ТАК ЗАМЕДЛЕННО! Именно поэтому вы задаете этот вопрос в первую очередь, потому что беспокоитесь об этом.

Если вы сделаете это внутри редуктора, то проблема исчезнет.

switch (action.type) {
  case updateCanDrinkFlag:
    const { canDrink, id } = action.payload;
    state[id].canDrink = canDrink;
    // synchronize two fields here:
    if (!canDrink) state[id].canDrive = false;
}

---

Сторона note

Я не уверен, каковы ваши знания о Redux, я хотел бы кое-что рассказать. Цитирую вас:

Будет ли случай, когда updateCanDrinkFlag завершится (изменяет мое состояние притока и this.props.canDrink меняется на false) ...

Примечание что это две разные вещи, которые происходят асинхронно . Когда updateCanDrinkFlag завершается, это только меняет ваше состояние притока. Обновление this.props.canDrink не является его работой.

Когда вы dispatch(ActionOfUpdateCanDrinkFlag), это то, что происходит внутри dispatch, если вы распаковываете :

function dispatch(action) {
  // ...
  currentState = reducer(prevState, action)
  // ...
}

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

Однако, когда реагирует на этот сигнал и син c props с store.getState() остается для React, чтобы принять решение, и эта фаза происходит асинхронно.