Должен ли mapStateToProps обновлять реквизиты асинхронно? - PullRequest
0 голосов
/ 11 февраля 2019

Я пытаюсь определить, действительно ли это await вызов действия из React, когда вам нужно иметь возможность немедленно получить значение из реквизита.Другими словами, рассмотрим этот пример:

// Import the Redux store directly (this is just to show that the store will update synchronously) 
import store from '../store';
const state = store.getState();

// Where foo is an object created by combineReducers and bar is a property of foo with initial value of 'baz'
console.log(this.props.foo.bar); // Prints 'baz'
console.log(state.foo.bar); // Prints 'baz'

// Now, call the action to set bar to 'new value'
this.props.setBar('new value');

console.log(this.props.foo.bar); // Prints 'baz' (still the old value)
console.log(state.foo.bar); // Prints 'new value' (updated)

// Currently, this function call will fail because it finds the old value of bar. This is the point of needing the value immediately... This function will need to look for the updated value of bar in state. I can't pass the new value directly as a parameter, because the function may also need to be called in other situations where it's not readily available like this one.
doSomethingThatWillLookForBar();

Я наблюдал такое поведение: действие выполняется синхронно, а хранилище Redux обновляется синхронно, а компонент обновляется асинхронно.Наблюдая за отладчиком, я вижу, что реквизит корректно обновлен, поэтому mapStateToProps работает, но не синхронно.Если это так, то получилось бы так же, как setState.При установке состояния, если вам нужно немедленно получить обновленное состояние, вам нужно либо await setState, либо использовать параметр обратного вызова setState.Итак ... когда я await мой вызов действия, он отлично работает:

// Before action call
console.log(this.props.foo.bar); // Prints 'baz'
console.log(state.foo.bar); // Prints 'baz'

// Now, call the action with an await
await this.props.setBar('new value');

console.log(this.props.foo.bar); // Prints 'new value'  (updated)
console.log(state.foo.bar); // Prints 'new value' (updated)

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

Для справки, я использую функцию connect:

const mapStateToProps = state => ({
  foo: state.foo
});

const mapDispatchToProps = dispatch => {
  return {
    setBar: (value) => {
      dispatch(setBar(value))
    }
  }
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Foo);

1 Ответ

0 голосов
/ 11 февраля 2019

Диспетчерские действия обновляют магазин немедленно.Однако реквизиты компонента React не будут обновляться сразу после этого, потому что:

  • Вы все еще находитесь в процессе выполнения текущего цикла событий, поэтому React не имел возможности повторно отрендерить компонентвсе же
  • В зависимости от того, где и когда было отправлено действие, React может визуализировать компонент асинхронно, а не сразу
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...