action is being dispatched before the state updates - reactjs

Question

After authentication I am redirected to the dashboard page where I call 3 APIs as soon as I land and then I display the data on it. I am getting the siteId from authentication page and is available in redux store and set that siteId to dashboard page's state. The issue is my action is firing before my state gets the value from redux. MapStateToProps is firing the action with undefined. After the action is fired, the state is being set. If I hard code the state, it works. I tried to check if my state is set before the action is fired, but seems like my check is not working.
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);
This is the full component code:
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);
What is wrong with my check? ComponentWillReceiveProps is firing the action now, I had ComponentDidMount fire the action before, that did not work either. How can I make sure that my state is set before this.props.getAlarmCount({siteId: storeNum.siteId}) is fired?