Как вызывать функцию до и затем в зависимости от состояния обновления данных-React-redux

Question

У меня есть выпадающий список выбора саги, и тот же компонент должен быть использован.Саги называют единственной вещью, которая не происходит, это то, что установленное состояние обновляется до вызова саги, поэтому компонент никогда не обновляет данные.

            recievedChangeValue=(selectVal)=>{
                console.log(selectVal)
                if(selectVal==='Yearly'){
                     this.props.getYearlySales() **//call to saga**
                     this.setState({salesData:this.props.yearlySales}) **//it updates before the called saga ends**                         
                 }
                if(selectVal==='Decade'){ 
                    this.props.getSales()**//call to saga**
                    this.setState({salesData:this.props.dataSales})   **//it updates before the called saga ends**                                           
                }
            }

Я знаю обратный вызов, но здесь состояние должно обновляться только послеСага зов. Я работаю над этим с прошлого дня, я понятия не имею, что должно быть сделано.Любая помощь приветствуется. Пожалуйста, дайте мне знать, где я иду не так.

Answer 1

 recievedChangeValue=(selectVal)=>{
this.setState({selectedSalesData:selectVal},
  ()=>{
    if(selectVal==='Yearly'){
        this.props.getYearlySales() 
    }
    if(selectVal==='Decade'){ 
        this.props.getSales()
    }
  }
)

}

следующее, что я написал в рендер

   let SalesData=this.handleSalesData(selectedSalesData)//calls on selecteddata and it works like a charm

Answer 2

Вы не можете ждать в компоненте для завершения саги, потому что this.props.getSales на самом деле не вызывает сагу - это просто отправка действия.

Когда отправляется действие, что-то может произойти вВаше приложение основано на этом, но способ работы паттерна заключается в том, что «диспетчер» не знает ни о чем из этого.

Единственный общий способ, которым сага может взаимодействовать с компонентами, - это изменение состояния избыточности.Поэтому вместо изменения локального состояния в обратном вызове вам придется подождать, пока изменится реквизит dateSales, а затем обновить локальное состояние с помощью getDerivedStateFromProps.

static getDerivedStateFromProps(props) {
  return {salesData: props.dataSales}
}

Для получения дополнительной информации об использовании getDerivedStateFromProps см.

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data-when-props-change

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state

https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops