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

for me, I think you should save the state in the

 `case CAR_DETAILS_REQUEST:
      return {
        ...state, // <-- shallow copy existing state
        loading: true,
      };
`

to be able to use it before o when you want to use a reducer you should each case
have the old state the reducer return the same sharp of initial state that put it you also used is loading and that not found in the initial state
so try to make the shape of the state

state={
isloading:false,
 carDetails: []

}

also try each time to same the state by {...state ,is loading:true}

If carDetails initial state is an array, then why are you destructuring object properties from it in your UI? Question for another time…

If after reloading the page the state reverts back to the initial state, an empty array is still a defined object. You need to track down what is causing your state.carDetails.carDetails to become undefined. If you examine your reducer notice that your CAR_DETAILS_REQUEST case wipes the carDetails state out and it becomes undefined. Honestly I’m surprised you aren’t seeing this issue when your code runs normally without a page reload.

You need to hold on to that state. For good measure, you should always shallow copy the existing state when computing the next state object unless you’ve good reason to omit parts of state.

export const carsDetailsReducer = (state = { carDetails: [] }, action) => {
  switch (action.type) {
    case CAR_DETAILS_REQUEST:
      return {
        ...state, // <-- shallow copy existing state
        loading: true,
      };

    case CAR_DETAILS_SUCCESS:
      return {
        ...state, // <-- shallow copy existing state
        loading: false,
        carDetails: action.payload
      };

    case CAR_DETAILS_FAIL:
      return {
        ...state, // <-- shallow copy existing state
        loading: false,
        error: action.payload,
      };

    default:
      return state;
  }
};

if you are using Axios your action should look like this with async function and await while you are calling API.

If you are passing API car id in the api link then pass the id in the parameters

import axios from "axios";


export const loadData = (id) => async (dispatch) => {
  dispatch({
       type: "CAR_DETAILS_REQUEST",
    });

  const detailData = await axios.get("http:\****/id");

  dispatch({
    type: "CAR_DETAILS_SUCCESS",
    payload: {
     success: detailData.data,
    },
  });
};

Reducer:

    const initailState = { carDetails: [], loading: true };

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

Your useEffect should only work when data is fetched

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(id));
}, [dispatch]);

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

You can also use it without a useEffect by making an onclick function like this:

const loadDetailHandler = () => {
    dispatch(getCarDetails(id));
  };

return (
    <div onClick={loadDetailHandler} >
    </div>

The problem in CAR_DETAILS_REQUEST. You only return { loading: true }; so carDetails will loss and become undefied.

Just update your reducer like this:

case CAR_DETAILS_REQUEST:
  return { ...state, loading: true };