calling async code in useState throwing null of undefined error - reactjs

Question

I am pretty new to react and redux. I am trying to call get method API in useEffect hook but the function I am calling isn't getting invoked at all. the same function is invoked when I tried calling outside the useEffect and the state is also updated but I still got that error Cannot read property 'map' of null. so in both the cases, the common thing is getting the error and my code seems good to me. all other functions and states are working except this and I am not able to figure out what I am missing. any help very much is appreciated. thank you.
Orders.js
const orders = (props) => {
// getting the orders
useEffect(() => {
props.fetchOrders();
}, []);
let orders;
if(props.loading || props.error) {
orders = <Loading />
}
console.log(props)
orders = props.orders.map((order) => <Order
key={order.id}
ingredients={order.ingredients}
price={order.price}
customer={order.customerDetails}
/>);
return(
<div>
{orders}
</div>
)
}
const mapStateToProps = state => {
return {
orders: state.orders,
error: state.error,
loading: state.loading
}
}
const mapDispatchToProps = dispatch => {
return {
fetchOrders: () => dispatch(getOrders())
}
}
export default connect(mapStateToProps, mapDispatchToProps) (errorHandler(orders, axiosInstance));
action.js
// not invoking
const getOrders = () => {
return dispatch => {
axiosInstance.get('/orders.json').then(res => {
const ordersData = transformData(res);
dispatch(fetchOrders(ordersData));
}).catch(err => {
console.log(err)
})
}
}
const transformData = (response) => {
// simplified logic
const ordersData = [];
if(response.data) {
for (let key in response.data) {
ordersData.unshift({
...response.data[key],
id: key
})
}
}
return ordersData;
}
const fetchOrders = (ordersData) => {
return {
type: actionTypes.GET_ORDERS,
orders: ordersData
}
}
export { getOrders }
reducer.js
const reducer = (state = intialState, action) => {
switch (action.type) {
.
.
case actionType.GET_ORDERS:
return setOrders(state, action);
.
.
default:
return state;
}
}
const setOrders = (state, action) => {
return {
...state,
orders: action.orders.concat(),
error: false,
loading: false
}
}