действие отправляется до обновления состояния

Question

После authentication Я перенаправлен на страницу панели инструментов, где я вызываю 3 API, как только я приземляюсь, и затем я отображаю данные на нем. Я получаю страницу siteId со страницы authentication, ее можно найти в хранилище резервов и установить для этого siteId состояние dashboard. Проблема в том, что мое действие увольняется до того, как мое состояние получит значение от редукса. MapStateToProps запускает действие с undefined. После того, как действие запущено, состояние устанавливается. Если я жестко закодирую состояние, это работает. Я пытался проверить, установлено ли мое состояние до запуска действия, но кажется, что моя проверка не работает.

class Dashboard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      alarmCount: [],
      workOrderCount: [],
      etaWorkOrder: [],
      countNum: true,
      siteId: this.props.storeNum && this.props.storeNum.siteId
      // siteId: 5260
    }
  }


  componentDidMount() {
    this.props.getOpenWorkOrdersCount();
    this.props.getEtaWorkOrder();
  }

  componentWillReceiveProps({ alarmCount, workOrderCount, etaWO, storeNum }) {
    if(alarmCount.code) {
        this.setState({ alarmCount: alarmCount.code.data.ticketCount })
    }
    if(workOrderCount) {
      this.setState({ workOrderCount: workOrderCount.data.event.woOutstanding })
    }
    if(etaWO) {
      this.setState({ etaWorkOrder: etaWO.data.woList })
    }
    if(storeNum && storeNum.siteId && !(alarmCount.fetching || alarmCount.success) && !this.state.alarmCount.length){
      this.props.getAlarmCount({siteId: storeNum.siteId});
    }
}


const mapStateToProps = state => {
  return {
      alarmCount: state.alarmCount,
      workOrderCount: state.workOrderCount.count,
      etaWO: state.etaWorkOrder.count,
      storeNum: state.ssoReducer.user
  }
}

const mapDispatchToProps = dispatch => ({
  getAlarmCount: data => dispatch(AlarmCountActions.getAlarmCount({ data }))
});
export default connect( mapStateToProps, mapDispatchToProps)(Dashboard);

Это полный код компонента:

class Dashboard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      alarmCount: [],
      workOrderCount: [],
      etaWorkOrder: [],
      countNum: true,
      // siteId: props.storeNum && props.storeNum.siteId
      siteId: ''
    }
    console.log('<<< storeNum', props.storeNum);
  }


  componentDidMount() {
    // this.props.getOpenWorkOrdersCount();
    // this.props.getEtaWorkOrder();
    // if(this.props.storeNum){
    //   this.props.getAlarmCount(this.props.storeNum.siteId);
    // }
  }
//   componentWillReceiveProps({ alarmCount, workOrderCount, etaWO, storeNum }) {
//     if(alarmCount.code) {
//         this.setState({ alarmCount: alarmCount.code.data.ticketCount })
//     }
//     if(workOrderCount) {
//       this.setState({ workOrderCount: workOrderCount.data.event.woOutstanding })
//     }
//     if(etaWO) {
//       this.setState({ etaWorkOrder: etaWO.data.woList })
//     }
//     if(storeNum){
//       this.setState({ siteId: storeNum.siteId })
//     }
// }

componentDidUpdate(prevProps) {
  console.log('prevProps: ', prevProps)
  if(prevProps.storeNum.siteId !== this.props.storeNum.siteId){
    this.props.getAlarmCount(this.props.storeNum.siteId);
  }
}


todaysDateFormatted = () => {
  let today = new Date();
  let dd = today.getDate();
  let mm = today.getMonth() + 1;
  let yyyy = today.getFullYear();
      if (dd < 10) { dd = '0' + dd }
      if (mm < 10) { mm = '0' + mm }
  return today = mm + '-' + dd + '-' + yyyy;
}
howManyToday = data => {
  let count = 0;
  let todaysDate = this.todaysDateFormatted();
  data.map(item => {
    date = item.eta.replace(/(\d{4})\-(\d{2})\-(\d{2}).*/, '$2-$3-$1')

    if(todaysDate == date)  count++;
  })
  return count;
}
  render() {
    const navigation = this.props.navigation;
    const woCount = this.state.workOrderCount
    console.log(' ^^^^^^^ storeNuM: ', this.state.siteId)
    return (
      <View style={styles.container}>
        <View style={styles.innerBox}>
          <View style={styles.leftBox}>
            <TouchableOpacity
              style={styles.activeAlarms}
              onPress={() => navigation.navigate(routes.ALARMS)}>
                <View style={{ justifyContent: 'flex-end', flex: 1, background: 'transparent'}}>
                  {this.state.countNum ? (
                    <Fragment>
                      <Text style={[styles.blueColor, styles.font_24, ]}>{this.state.alarmCount}</Text>
                    </Fragment>
                  ) : null}
                  <Text style={[styles.blueColor, styles.font_16] }>Active Alarms</Text>
                </View>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.openWorkOrders}
              onPress={() => navigation.navigate(routes.WORK_ORDERS)}>
              <View style={{ justifyContent: 'flex-end', flex: 1 }}>
                <Text style={[styles.whiteColor, styles.font_24]}>{woCount}</Text>
                <Text style={[styles.whiteColor, styles.font_16]}>Open{'\n'}Work Orders</Text>
              </View>
            </TouchableOpacity>
          </View>
          <View style={styles.rightBox}>
            <TouchableOpacity
              style={styles.todayWorkOrders}
              onPress={() => navigation.navigate(routes.WORK_ORDERS)}
            >
              <View style={{ justifyContent: 'flex-end', flex: 1 }}>
                <Text style={[styles.whiteColor, styles.font_24]}>{this.howManyToday(this.state.etaWorkOrder)}</Text> 
                <Text style={[styles.whiteColor, styles.font_16]}>Today ETA{'\n'}Work Orders</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.diyTrainingVideos}
              onPress={() => navigation.navigate(routes.TRAINING_VIDEOS)}
            >
              <View style={{ justifyContent: 'flex-end', flex: 1 }}>
                <Text style={[styles.blueColor, styles.font_16]}>DIY{'\n'}Training Videos</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
        <View style={styles.createWorkOrderBox}>
          <TouchableOpacity
            style={styles.createBtn}
            onPress={() => navigation.navigate(routes.CREATE_WORK_ORDER)}>
            <Text style={styles.workOrderText}>+ WORK ORDER</Text>
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}
const mapStateToProps = state => {
  return {
      alarmCount: state.alarmCount,
      workOrderCount: state.workOrderCount.count,
      etaWO: state.etaWorkOrder.count,
      storeNum: state.ssoReducer.user
  }
}
const mapDispatchToProps = dispatch => ({
  getEtaWorkOrder: () => dispatch(etaWorkOrderActions.etaWorkOrder()),
  getOpenWorkOrdersCount: () => dispatch(WorkOrderCountActions.count()),
  getAlarmCount: data => dispatch(AlarmCountActions.getAlarmCount({ data })),
  logoutUser: () => dispatch(logoutAction.logoutUser())
});
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Dashboard);

Что не так с моим чеком? ComponentWillReceiveProps сейчас запускает действие, у меня было ComponentDidMount, запускавшее действие раньше, которое тоже не работало. Как я могу убедиться, что мое состояние установлено до того, как this.props.getAlarmCount({siteId: storeNum.siteId}) будет запущен?