Изменение состояния Redux не отражается сразу после отправки. Является ли отправка асинхронной?

Question

Я прошел через сообщество и обнаружил, что многие люди говорят, что функция dispatch в redux является синхронной.Однако, когда я создаю следующее приложение с react-redux, я нахожу ошибку, по-видимому, из-за асинхронного поведения моей функции отправки.Поэтому мне интересно, что является причиной следующих кодов и как ее решить (или, возможно, заменить шаблон проектирования на лучшие практики).

В основном это часть, где

• пользовательвыбирает значение из выпадающего меню
• приложение сохраняет его в states
• приложение читает из states и запрашивает API с аргументом на основе значения этого состояния, выбранного пользователем,

После того, как я выбрал значение в раскрывающемся списке, при извлечении возникает ошибка неправильного формата параметра, поскольку URL моего запроса example.com?param=undefined (начальное состояние undefined).Когда я выбираю второй раз, такой ошибки формата нет (очевидно, потому что настройка states в любом случае заканчивается, по крайней мере, один раз, и, по крайней мере, формат параметра правильный)

Dropdown (используя react-select)

class Dropdown extends Component {
    onValueChange(v) {
        this.props.setSomeValue(v);
        this.props.queryData();
    }
    render() {
        return <Some-react-select-Dropdown
            value={this.props.someValue}
            onChange={this.onValueChange}
        />
    }
}

export default connect(state => {
    someValue: state.someValue
}, dispatch => {
    setSomeValue: dispatch(setSomeValue(v))
})

Приложение

class App extends Component {
    queryData() {
        fetch(`example.com?param=${this.props.someValue}`/*, ...*/).then(/*...*/)
    }
    render() {
        return <Dropdown
            queryData={this.queryData}
        />
    }
}

export default connect(state => {
    someValue: state.someValue.value // because react-select stores selected value in {label, value} format
})(App)

Я ожидаю, что программа выполнит установку состояния (через диспетчеризацию) и синхронную выборку, так чтоURL запроса может быть успешно сгенерирован.Однако (как упомянуто выше) мое выбранное значение раскрывающегося списка впервые заставляет приложение запрашивать API с начальным состоянием undefined.

Answer 1

Вы правильно сделали вывод, что значение не изменилось после выполнения вашего действия здесь.

onValueChange(v) {
    this.props.setSomeValue(v); <-- creates action, updates redux-state
    this.props.queryData(); <-- executes before action above is complete.
}

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

Поместите это в ваш Раскрывающийся список Компонент

componentDidUpdate(prevProps){
    if(prevProps.someValue !== this.props.someValue){
          this.props.queryData();
    }
}

Так что теперь вы можете запустить queryData(), как только будет подтверждено, что ваше состояние someValue изменилось.