How can I render the data that I got from the response that I did in redux-thunk and put it in useEffect?

Question

I want to render the fullName string from response from the API call that I did in redux-thunk, and put it in useEffect with dispatch (useDispatch() hook). If I return nothing in JSX and if I console.log the state it is actually passes, and I can see the whole data in the console. But if I want to render any part of the data, I get an error:

Uncaught TypeError: Cannot read properties of null (reading 'fullName').

const Profile = (props) => {
  let { userId } = useParams();

  const dispatch = useDispatch();

  const state = useSelector((state) => state);

  useEffect(() => {
    dispatch(getUserProfile(userId));
  }, []);

  return <div>
    {state.profile.profile.fullName} //error if i want smth to render, two profile because one from redux's initialState, and one from api.
  </div>;
};

export default Profile;

THUNK

export const getUserProfile = (userId) => (dispatch) => {
  profileAPI.getProfile(userId).then((response) => {
    debugger
    dispatch(setProfile(response));
  });
};

I tried conditional rendering, but it didnt get me the solution. Ive tried a lot ways of conditional rendering, and no one of them was helpful

Answer 1

Can you Please share Profile Reducer Code also because as per my observation Profile is like an object

export const initialState = {
    profile:{fullName:""};
}
export const profileReducer =(state = initialState,action={})=>{
..
}

and you want to get only profileReducer Data then get only profileReducer data by state.profileReducer an get the value as const {profile}

 const {profile} = useSelector((state) => state.profileReducer);

for testing check if are you able to getting proflie data by

useState(()=>{console.log("profile",profile)},[profile])