getting error while destructuring the data from react redux. why it is giving error and how to solve this?

Question

Here is the profile component where i am trying to fetch the user data and getting error in the highlighted part of code. why is userData is undefined??

import React, {useEffect} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import { getUserProfile } from '../../actions/userActions';
import Styles from './Profile.module.scss';

const Profile = (props) => {
    const userId = props.match.params.id;

    const dispatch = useDispatch();

    const userLogin = useSelector(state => state.userLogin);
    const {userInfo} = userLogin;

    **const userProfile = useSelector(state => state.userProfile);
    const {loading, error, userData} = userProfile;

    const {posts, data} = userData;**

    useEffect(() => {
        if(!userInfo){
            props.history.push('/login');
        }else{
            dispatch(getUserProfile(userId));
        }
    }, [dispatch,userId])

    return (
        <section>
            <div className={Styles.Container}>
                <h1>{data.userName}</h1>
                <h1>{data.followers.length} followers</h1>
                <h1>{data.following.length} following</h1>
                <h1>{posts.length} posts</h1>
            </div>
        </section>
    )
}

export default Profile

Here is the Reducer file for userProfile -

export const userProfileReducer = (state={ userData: {}}, action) => {
  switch(action.type){
    case GET_USER_PROFILE_REQUEST:
      return { loading: true, ...state, }
    
    case GET_USER_PROFILE_SUCCESS:
      return { ...state, loading: false, userData: action.payload}
    
    case GET_USER_PROFILE_FAIL:
      return { loading: false, error: action.payload}
    default: return state;
  }
}

I am getting this error

TypeError: Cannot destructure property 'posts' of 'userData' as it is undefined. Profile

Answer 1

It's impossible for us to know why it's undefined because you don't show where you add the userProfile state on your redux store.

I think userData "loading" during your render, so for the first render userData is undefined.

To avoid this bug, please try to add a if statement:

    useEffect(() => {
        if(!userInfo){
            props.history.push('/login');
        }else{
            dispatch(getUserProfile(userId));
        }
    }, [dispatch,userId])

    if (userData) {
      const {posts, data} = userData;**
      return (
        <section>
            <div className={Styles.Container}>
                <h1>{data.userName}</h1>
                <h1>{data.followers.length} followers</h1>
                <h1>{data.following.length} following</h1>
                <h1>{posts.length} posts</h1>
            </div>
        </section>
      )
    }

    return <div>Loading...</div>

Answer 2

The problem is your case GET_USER_PROFILE_FAIL which returns an object with properties loading and error and does not copy any other properties from ...state . This causes the userData property to become undefined .

If this is the desired behavior then you need to check for undefined in your component and show some sort of error message.