Getting error value as undefined in react - reactjs

Question

I want to use the error value as an alert in my application. my server response also gave me the correct response. but when used in reacts error value shows undefined.
<b>Response Getting from API request</b>
{"success":false,"error":"Product Not Found"}
<b>code in react file</b>
const alert = useAlert();
const dispatch = useDispatch();
const { loading, error, products } = useSelector((state) => state.products);
useEffect(() => {
if (error) {
alert.error(error);
}
dispatch(getProduct());
}, [dispatch, error, alert]);
<b>Reducer</b>
export const productReducer = (state = { products: [] }, action) => {
switch (action.type) {
case ALL_PRODUCT_REQUEST:
return {
loading: true,
products: [],
};
case ALL_PRODUCT_SUCCESS:
return {
loading: false,
products: action.payload.products,
productsCount: action.payload.productsCount,
};
case ALL_PRODUCT_FAIL:
return {
loading: false,
error: action.payload,
};
case CLEAR_ERRORS:
return {
...state,
error: null,
};
default:
return state;
}
};
<b>action</b>
export const getProduct = () => async (dispatch) => {
try {
dispatch({ type: ALL_PRODUCT_REQUEST });
const { data } = await axios.get("/api/v1/products");
dispatch({
type: ALL_PRODUCT_SUCCESS,
payload: data,
});
} catch (error) {
dispatch({
type: ALL_PRODUCT_FAIL,
payload: error.response.data.message,
});
}
};
<b>store file</b>
import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import {
productReducer,
productDetailsReducer,
} from "./reducers/productReducer";
const reducer = combineReducers({
products: productReducer,
productDetails: productDetailsReducer,
});
let initialState = {};
const middleware = [thunk];
const store = createStore(
reducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware))
);
export default store;
Not able to see this function works alert. error(error).when I console this error it shows undefined. I want to show an alert "Product Not Found" when getting an error.

Answer 1

Not sure what is your redux structure is, but it seems like you are extracting out your state from the redux store incorrectly. So maybe try to replace this
const { loading, error, products } = useSelector((state) => state.products);
with
const { loading, error, products } = useSelector((state) => {
return {
loading: state.loading,
products: state.products,
error:state.error
});
EDIT:
State present in the useSelector is your root reducer which means it contains all the reducers in it, just for example, your product reducer, your cart reducer, user reducer and so on. Since, productReducer is being used in your root reducer, you should first access the productReducer and then its properties which should look like below (adjust the variables as per your variable names)
const { loading, error, products } = useSelector((state) => {
return {
loading: state.products.loading,
products: state.products.products,
error:state.products.error
});

Answer 2

This is because useSelector actually accesses data from the state (managed by Redux) on the frontend. This is data after fetching from the API so this is purely the data part from the API and not error or loading
Here, you have destructured fields of whatever gets returned when you try to access the products slice of your state. Which will not have fields like loading or error but an array of product objects.
To fix this, you should store error and loading responses from your API in your Redux state in a structured and only then can you access them in each of your React components accessing this state.
eg code :
const { loading, error, products } = useSelector((state) => {
// Curly braces with return should not be on next line
return {
loading: state.loading,
products: state.products,
error:state.error
});
Also, I would suggest using packages like react-query to address such use cases well
Alternative
Write your own hook for handling such async tasks
Code for hook
import { useCallback, useEffect, useState } from "react"
export default function useAsync(callback, dependencies = []) {
const [loading, setLoading] = useState(true)
const [error, setError] = useState()
const [value, setValue] = useState()
// Simply manage 3 different states and update them as per the results of a Promise's resolution
// Here, we define a callback
const callbackMemoized = useCallback(() => {
setLoading(true)
setError(undefined)
setValue(undefined)
callback()
// ON SUCCESS -> Set the data from promise as "value"
.then(setValue)
// ON FAILURE -> Set the err from promise as "error"
.catch(setError)
// Irresp of fail or success, loading must stop after promise has ran
.finally(() => setLoading(false))
// This function runs everytime some dependency changes
}, dependencies)
// To run the callback function each time it itself changes i.e. when its dependencies change
useEffect(() => {
callbackMemoized()
}, [callbackMemoized])
return { loading, error, value }
}
Using this hook in the component
import useAsync from "./useAsync"
export default function AsyncComponent() {
const { loading, error, value } = useAsync(() => {
// 3 states and their updated versions are returned while the promise is getting resolved
return new Promise((resolve, reject) => {
const success = false
setTimeout(() => {
success ? resolve("Hi") : reject("Error")
}, 1000)
})
})
return (
<div>
<div>Loading: {loading.toString()}</div>
<div>{error}</div>
<div>{value}</div>
</div>
)
}