React / Redux - Создать XHR-запрос на основе изменения состояния

Question

У меня есть метод, который вызывается при нажатии кнопки. В этом методе я переключаю состояние между истинным или ложным. После того, как я переключаю состояние, мне нужно сделать XHR-запрос к серверу с состоянием, которое я только что изменил.

handleButtonClick = () => {
    //toggle 'in_progress' state attribute to false or true
    this.toggleInProgressState();

    //redux widget state
    const { state } = this.props;

    //Send data to server 
    const data = {};
    data.in_progress = state.in_progress;
    axios.patch(`/api/v1/somewhere}/`, data)
        .then((response) => {
            console.log(response);
        })
        .catch((error) => {
            console.log(error);
        });
}

Проблема, с которой я сталкиваюсь, заключается в том, что состояние, которое я отправляю на сервер, не является фактическим состоянием приложения. Я думаю, что это наиболее вероятно, потому что React еще не закончил рендеринг. Как я могу убедиться, что React обновил состояние перед отправкой моего XHR?

Спасибо!

Answer 1

Извините, теперь я увидел, что вы работаете с Redux.Здесь вы можете использовать метод жизненного цикла componentWillReceiveProps и сравнить новое состояние со старым состоянием.Если он изменился, вы можете сделать запрос XHR.Это когда вы сопоставили свое состояние притока с реквизитом.

componentWillReceiveProps(nextProps){
  if(nextProps.yourState!==this.props.yourState){
    yourXhrRequest();
  }
}

Answer 2

this.setState является асинхронной функцией.Сделайте ваш запрос xhr в обратном вызове this.setState.Таким образом, вы можете работать с измененным состоянием.

this.setState({someState: someState}, ()=>{
   yourXhrRequest() //Here the state has changed
});