How do i fix this ? i am getting this error 'TypeError: Cannot read property 'map' of undefined' i am trying to access the data from the actions file

Question

Here is the list Orders file. this is the code i have created so far But when i try to map throught the orders i am reveining that error and i dont know why. When i use Postman to try and get the orders, it works pefectly fine which means im either missing a code or got an error somewhere within these codes. Does anyone have an idea or could see where the porbl;em is? So the error i am getting is as follow

'TypeError: Cannot read property 'map' of undefined'

    const { orders, loading, error } = useSelector(state => state.personalUserOrders)
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch(personalORders())
    }, [ dispatch])
    
    return ( 
        <div>

<table className='tables'>
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Aount</th>
                   
                    </tr>
                </thead>
                <tbody>
                    {   orders.map((order) => (
                            
                            <tr key={order._id}>
                                <td>{order._id}</td>   
                                <td>{order.sumPrice}</td>        
                            </tr>
                        ))
                    }
                </tbody>
            </table> 
        </div>
       
    )
}

export default OrdersList

OrdersActions file

import axios from 'axios'
import {
    REQUEST_CREATE_ORDER, SUCCES_CREATE_ORDER, FAIL_CREATE_ORDER, CLEAR_ERRORS,
    REQUEST_PERSONAL_ORDER, SUCCESS_PERSONAL_ORDER,FAIL_PERSONAL_ORDER

} from '../constants/orderConstant'


export const createOrders = (orders) => async (dispatch, getState) => { 
    try {
        dispatch({
            type: REQUEST_CREATE_ORDER
        })

        const config = {
            headers: {
                'Content-Type': 'application/json'
            }
        }

        const { data } = await axios.post(`/api/orders/newOrder`, orders, config)

        console.log('Datttttta',{data})

        dispatch({
            type: SUCCES_CREATE_ORDER,
            payload: data
        })


        
    } catch (error) {
        dispatch({
            type: FAIL_CREATE_ORDER,
            payload: error.response.data.message
  
        }) 

    }
}

export const personalORders = () => async (dispatch) => { 
    dispatch({
        type:REQUEST_PERSONAL_ORDER
    })
    try {
        const { data } = await axios.get('/api/orders/personalOrders')
        dispatch({
            type: SUCCESS_PERSONAL_ORDER,
            payload: data
        })
        
    } catch (error) {
        dispatch({
            type: FAIL_PERSONAL_ORDER,
            payload: error.response.data.message
        })
        
    }

}
export const clearError=()=> async (dispatch)=>{
    dispatch({
        type: CLEAR_ERRORS
    })

}

Orders Reducer File

import {
    REQUEST_CREATE_ORDER,
    SUCCES_CREATE_ORDER,
    FAIL_CREATE_ORDER,
    CLEAR_ERRORS,

    REQUEST_PERSONAL_ORDER,
    SUCCESS_PERSONAL_ORDER,
    FAIL_PERSONAL_ORDER
} from '../constants/orderConstant'


export const createNewOrderReducter = (state = {}, action) => {
    switch (action.type) { 
        case REQUEST_CREATE_ORDER:
            return {
                ...state,
                loading: true
            }
        
        case SUCCES_CREATE_ORDER:
                return {
                    loading: false,
                    orders: action.payload
            }
        
        case FAIL_CREATE_ORDER:
            return {
                loading: false,
                 error: action.payload
            }
        
        case CLEAR_ERRORS:
            return {
                ...state,
                error: null
            }
              
        default:
            return state

    }

}

export const personalOrdersReducer = (state = { orders: [] }, action) => { 
    switch (action.type) { 
        case REQUEST_PERSONAL_ORDER:
            return {
                loading: true
            }
        
        case SUCCESS_PERSONAL_ORDER:
                return {
                    loading: false,
                    orders: action.payload
            }
        
        case FAIL_PERSONAL_ORDER:
            return {
                loading: false,
                 error: action.payload
            }
        
        case CLEAR_ERRORS:
            return {
                ...state,
                error: null
            }  
        default:
            return state
    }
}

Answer 1

You try to get personalUserOrders from store, however i can see just orders in your reducer.

Also you try to destruct full state object, from state.personalUserOrders Try to use this

    const { orders, loading, error } = useSelector(state => state)