[Solved] React useEffect doesn’t dispatch the redux action after page refresh

Vidarshan Adithya Asks: React useEffect doesn’t dispatch the redux action after page refresh
I’m trying to render the data from the following object of data which is coming from an API.

Code:
{
    "code": 0,
    "c": "verified",
    "d": "verified",
    "leaseInfo": {
        "infoId": 6
    },
    "cpfPrice": "500.00",
    "carCurrentLocation": {
        "id": 1,
        "carId": "df47a56a395a49b1a5d06a58cc42ffc4"
    },
    "n": "verified",
    "p": "false",
    "ownerCarInfo": {
        "brand": "Ferrari",
        "model": "0"
    },
    "serviceFeeRate": 0.10,
    "depositPrice": "100.00",
    "pics": [
        {
            "picid": 49,
            "carId": "df47a56a395a49b1a5d06a58cc42ffc4"
        },
    ],
    "items": {
        "itemid": 5,
        "carId": "df47a56a395a49b1a5d06a58cc42ffc4"
    }
}

I’m using react-redux to dispatch an action, where I will be provided with the data under a state named ‘carDetails‘.

However, when I try to access the data, if my component is refreshed, carDetails becomes undefined and hence gives “Cannot read property ownerCarInfo of undefined.

I’m obtaining and de-structuring the data of carDetails like this in my React component:

Code:
import React, {useEffect} from 'react';
import { useDispatch, useSelector } from 'react-redux';

const CarInfo = ({ match }) => {

const dispatch = useDispatch();
const details = useSelector((state) => state.carDetails);

const { loading, carDetails } = details;
const {pics, carCurrentLocation, items, ownerCarInfo} = carDetails;

useEffect(() => {
   dispatch(getCarDetails(match.params.id));
}, [dispatch, match]);

return (
   <div>
  {loading ? (
    <Loader></Loader>
  ) : (
    <>
      <p>{d.depositPrice}</p>
      <p>{ownerCarInfo.brand}</p>
    </>
  )}
</div>

); )

}

As long as the component or the React application is not refreshed, it retrieves data and displays it correctly. The carDetails becomes an empty array as soon as the page is refreshed.

This is the getCarDetails() action:

Code:
export const getCarDetails = (id) => async (dispatch, getState) => {
  try {
    dispatch({
      type: CAR_DETAILS_REQUEST,
    });

    const { userLogin } = getState();
    const { userInfo } = userLogin;

    const config = {
      headers: {
        Authorization: userInfo.token,
        'Content-Type': 'application/json',
      },
    };

    const { data } = await axios.get(
      `${BASE_API}/car/info/getDetails/${id}/${userInfo.bscId}`,
      config
    );

    dispatch({
      type: CAR_DETAILS_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: CAR_DETAILS_FAIL,
      payload:
        error.response && error.response.data.msg
          ? error.response.data.msg
          : error.msg,
    });
  }
};

This is my reducer:

Code:
export const carsDetailsReducer = (state = { carDetails: [] }, action) => {
  switch (action.type) {
    case CAR_DETAILS_REQUEST:
      return { loading: true };
    case CAR_DETAILS_SUCCESS:
      return { loading: false, carDetails: action.payload };
    case CAR_DETAILS_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};

This is how I declare carDetails in the redux store.

Code:
const reducer = combineReducers({
  carDetails: carsDetailsReducer,
});

What is the cause for carDetails becoming undefined and the useEffect not running on page refresh?

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.