Cannot destructure property 'chats' of 'this.props.data' as it is undefined

I'm new in full stack developing and I'm trying to code something to understand better frontend with React JS. I've been using also redux but never had an error. Yesterday I've coded a list of chat of a user ( implemented with redux ). To not miss something I've written this page similar to another used to shows posts:

chat.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Chat from '../components/chat/Chat';
import Grid from '@material-ui/core/Grid';

import PostSkeleton from '../utils/PostSkeleton';

import Profile from '../components/profile/Profile'

import { connect } from 'react-redux';
import { getChats } from '../redux/actions/dataActions';

class chat extends Component {
    componentDidMount(){
        this.props.getChats();
    }
    render(){
        const {chats, loading} = this.props.data;
        let recentChatsMarkup = !loading ? (                   //se ci sono post li visualizza uno ad uno
            chats.map(chat => 
            <Chat key={chat.chatId} chat={chat}/>)
            ) : (
                <PostSkeleton/>
                );
        return(
            <Grid container>
               <Grid item sm={4} xs={12}>
                <Profile/>
               </Grid>
               <Grid item sm={8} xs={12}>
                {recentChatsMarkup}
               </Grid>
               <Grid item sm={4} xs={12}>
                
               </Grid>
           </Grid>
        );
    }
    
}
chat.propTypes = {
    getChats: PropTypes.func.isRequired,
    classes: PropTypes.object.isRequired
}

const mapStateToProps = state =>({
    authenticated: state.user.authenticated
})

export default connect(mapStateToProps,{getChats})(chat);

It gives me error in this line:

const {chats, loading} = this.props.data;

But I've added it to my reducer:

dataReducer.js

const initialState = {
    posts: [],
    chats: [],
    chat: {},
    post: {},
    loading: false
  };
switch (action.type) {
      case LOADING_DATA:
        return {
          ...state,
          loading: true
        };
       case SET_CHATS:
          return {
            ...state,
            chats: action.payload,
            loading: false
          };
       default:
          return state;
    }
  }

I've also had a function to load all chat names:

dataActions.js

 export const getChats = () => (dispatch) => {
    dispatch({ type: LOADING_DATA });
    axios
      .get('/chats')
      .then((res) => {
        dispatch({
          type: SET_CHATS,
          payload: res.data
        });
      })
      .catch((err) => {
        dispatch({
          type: SET_CHATS,
          payload: []
        });
      });
  };

I've no idea about how resolve this, what can I do?