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

Question

I'm trying to render the data from the following object of data which is coming from an API.

{
    "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:

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:

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:

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.

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

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

@AmirhosseinEbrahimi I have added the function to the above code — Vidarshan Rathnayake, Aug 01 '21 at 08:14

score 2 · Accepted Answer · edited Aug 03 '21 at 05:02

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>

This is the complete solution that ultimately worked. Thanks! — Vidarshan Rathnayake, Aug 01 '21 at 12:52

score 1 · Answer 2 · edited Aug 02 '21 at 03:50

1

The problem is in CAR_DETAILS_REQUEST. You only return { loading: true }; so carDetails will be lost and become undefined.

Just update your reducer like this:

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

edited Aug 02 '21 at 03:50

rmlockerd

3,776
2
15
25

answered Aug 01 '21 at 08:46

Viet

12,133
2
15
21

Drew Reese · Answer 3 · 2021-08-01T08:57:09.090

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;
  }
};

Thanks for pointing out a mistake which I realized after a while. I have been trying to de-structure from an array. However, shallow copying did help. — Vidarshan Rathnayake, Aug 01 '21 at 12:49

score 1 · Answer 4 · answered Aug 01 '21 at 08:57

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}

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

4 Answers4