title: loading Data fetched from the API after refreshing page in react using redux
body: <p>I am fetching array of objects from an API endpoint, 
  I am using react-redux for state management.</p>
  
  <p>I have two problems.</p>
  
  <ol>
  <li>data gets fetched but only loads and displays after I refresh the page.</li>
  <li>console logging single statement 4 times 2 blank array before setting state and 2 with data after setting state where it should have been only once I guess.</li>
  </ol>
  
  <p>Following is my code.</p>
  
  <p>Dashboard Action</p>
  
  <pre><code>import dashboardAPI from "../../../API/ShopUserAPI/dashboardAPI"
  
  export const CURRENT_ORDER_LOAD = "CURRENT_ORDER_LOAD"
  export const CURRENT_ORDER_FETCH = "CURRENT_ORDER_FETCH"
  export const CURRENT_ORDER_ERROR = "CURRENT_ORDER_ERROR"
  
  export const currentOrderAction = () =&gt; {
      return dispatch =&gt; {
          dispatch({ type: CURRENT_ORDER_LOAD, payload: '' })
          dashboardAPI.get('/orders')
              .then(resp =&gt; {
                  console.log(resp)
                  dispatch({ type: CURRENT_ORDER_FETCH, payload: resp.data.data.orders })
              })
              .catch(err =&gt; {
                  console.log(err)
                  dispatch({ type: CURRENT_ORDER_ERROR, payload: 'error occured. Retry !' })
              })
      }
  }
  </code></pre>
  
  <p>Dashboard Reducer</p>
  
  <pre><code>import { CURRENT_ORDER_LOAD, CURRENT_ORDER_FETCH, CURRENT_ORDER_ERROR } from "../actions/dashboardActions";
  
  const initialState = {
      isLoading: true,
      currentOrderData: [],
      currentOrdererror: ''
  }
  
  const dashboardReducer = (state = initialState, action) =&gt; {
      switch (action.type) {
          case CURRENT_ORDER_LOAD:
              return {
                  ...state,
                  isLoading: true
              }
          case CURRENT_ORDER_FETCH:
              return {
                  ...state,
                  isLoading: false,
                  currentOrderData: action.payload
              }
          case CURRENT_ORDER_ERROR:
              return {
                  ...state,
                  isLoading: false,
                  currentOrdererror: action.payload
              }
          default:
              return state
      }
  }
  
  export default dashboardReducer
  </code></pre>
  
  <p>Dashboard page</p>
  
  <pre><code>import React from 'react'
  import { Link } from 'react-router-dom'
  import { makeStyles } from '@material-ui/core/styles';
  import { Button, Typography, Grid, DialogContent, DialogActions, Dialog, DialogTitle, Divider, ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails } from "@material-ui/core";
  import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
  import { connect } from "react-redux";
  
  
  const useStyles = makeStyles((theme) =&gt; ({
    contentCenter: {
      display: 'flex',
      justifyContent: 'center',
      marginTop: '1rem'
    },
  
    newSection: {
      marginTop: '1rem'
    },
  
    innerSection: {
      padding: '1rem'
    },
  
    heading: {
      fontSize: theme.typography.pxToRem(15),
      color: theme.palette.text.secondary,
  
    },
    secondaryHeading: {
      fontSize: theme.typography.pxToRem(15),
      color: theme.palette.text.secondary,
    },
  
  }))
  
  const CurrentOrders = (props) =&gt; {
  
    console.log(props.currentOrderData) // console.log printing 4 times
  
    const [expanded, setExpanded] = React.useState(false);
  
    const handleChange = (panel) =&gt; (event, isExpanded) =&gt; {
      setExpanded(isExpanded ? panel : false);
    };
  
    const classes = useStyles()
  
    return (
      &lt;div className={classes.newSection}&gt;
  
        {/* current orders list */}
        &lt;Typography className={classes.contentCenter}&gt;
          Current orders
        &lt;/Typography&gt;
  
        {/* Orders expansion panel list */}
  
        {props.currentOrderData.map(currentOrders =&gt; (
          &lt;ExpansionPanel expanded={expanded === 'panel1'} onChange={handleChange('panel1')} className={classes.newSection}&gt;
            &lt;ExpansionPanelSummary
              expandIcon={&lt;ExpandMoreIcon /&gt;}
              aria-controls="panel1bh-content"
              id="panel1bh-header"
            &gt;
              &lt;Typography className={classes.heading}&gt;Order ID: #{currentOrders.orderID}&lt;/Typography&gt;
            &lt;/ExpansionPanelSummary&gt;
            &lt;ExpansionPanelDetails&gt;
              &lt;Grid container justify="space-between"&gt;
                &lt;Grid item&gt;
                  &lt;Link to="/order" style={{ textDecoration: "none" }}&gt;
                    &lt;Button size="small" variant="contained" color="primary"&gt;
                      View Order
                  &lt;/Button&gt;
                  &lt;/Link&gt;
                &lt;/Grid&gt;
  
              &lt;/Grid&gt;
            &lt;/ExpansionPanelDetails&gt;
          &lt;/ExpansionPanel&gt;
        ))}
      &lt;/div&gt;
    )
  }
  
  const mapStateToProps = state =&gt; {
    return {
      currentOrderData: state.dashboard.currentOrderData
    }
  }
  
  export default connect(mapStateToProps)(CurrentOrders)
  </code></pre>
  
  <p>I've dispatched dashboard action in the parent component of this page</p>
  
  <p>DIspatching of Dashboard</p>
  
  <pre><code>import React, { useEffect } from "react";
  import { Container } from "@material-ui/core";
  import CurrentOrders from "./CurrentOrders";
  import TodaysOrders from "./TodaysOrders";
  import { makeStyles } from '@material-ui/core/styles';
  import { Button, Typography, Grid, DialogContent, DialogActions, Dialog, DialogTitle, Divider } from "@material-ui/core";
  import { connect } from "react-redux";
  import { currentOrderAction } from "../../../store/ShopUserStore/actions/dashboardActions";
  
  const useStyles = makeStyles((theme) =&gt; ({
    contentCenter: {
      display: 'flex',
      justifyContent: 'center',
      marginTop: '1rem'
    },
  
    newSection: {
      marginTop: '1rem'
    },
  
    innerSection: {
      padding: '1rem'
    },
  
    buttonSuccess: {
      color: theme.palette.success.main
    }
  
  }))
  
  const Home = (props) =&gt; {
    const [open, setOpen] = React.useState(false);
  
    useEffect(() =&gt; {
      props.getCurrentOrders()
    })
  
    const handleClickOpen = () =&gt; {
      setOpen(true);
    };
  
    const handleClose = () =&gt; {
      setOpen(false);
    };
  
    const classes = useStyles()
  
    return (
      &lt;div&gt;
        &lt;Container&gt;
          {/* shop status */}
          &lt;Grid container justify="flex-start" className={classes.newSection}&gt;
            &lt;Button variant="outlined" color="primary" onClick={handleClickOpen} className={classes.buttonSuccess}&gt;
              Online
          &lt;/Button&gt;
          &lt;/Grid&gt;
  
          {/* shop status confirmation dialog */}
          &lt;Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}&gt;
            &lt;DialogTitle id="customized-dialog-title" onClose={handleClose}&gt;
              Shop status
          &lt;/DialogTitle&gt;
            &lt;Divider /&gt;
            &lt;DialogContent&gt;
              &lt;Typography className={classes.newSection}&gt;
                Are you sure that you want to change shop status ?
            &lt;/Typography&gt;
            &lt;/DialogContent&gt;
            &lt;DialogActions&gt;
              &lt;Button autoFocus onClick={handleClose} color="primary"&gt;
                No
            &lt;/Button&gt;
              &lt;Button autoFocus onClick={handleClose} color="primary"&gt;
                Yes
            &lt;/Button&gt;
            &lt;/DialogActions&gt;
          &lt;/Dialog&gt;
  
          &lt;Grid container spacing={3}
          &gt;
            &lt;Grid item xs={12} md={6}&gt;
              &lt;CurrentOrders /&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={12} md={6}&gt;
              &lt;TodaysOrders /&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
  
        &lt;/Container&gt;
  
      &lt;/div&gt;
    )
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      getCurrentOrders: () =&gt; dispatch(currentOrderAction())
    }
  }
  
  export default connect(null, mapDispatchToProps)(Home)
  </code></pre>