Cannot access the property of an object - getting undefined-CodePudding

Now i have seen the other questions of this type and tried the solutions and it didnt work.

So now whats the problem?

Im using redux dispatching same data, an object with a label and userID, im then putting that data in a const pharmas with useSelector, when i log the const i get an object in the console containing the dispatched data and that is fine.

Now the problem is when i try to log pharmas.userID i get undefined for some reason.

Heres how it looks like when i log it normally console.log(pharmas) and this isJSON.stringify(pharmas)

Can someone please explain why am i getting cannot read property of undefined

and what can i do to extract userID since i need it to filter out some data?

Thanks in advance!

Heres the code, getting data and and logging it

const pharmas = useSelector ((state) => state.pharmacies.filteredPharmacies)

console.log('pharmas', pharmas)

Dispatching the data:

const handleOnChange = (value) => {
 dispatch(getPharmacie(value))
 
 console.log('HERE',value)
};

Heres what the "value" looks like in the console Exactly like i get it in pharmas:

heres the reducer:


export function pharmacies(
  state = { pharmacies: [], selectedPharmacies: [], filterPharmacies: [] },
  action
) {
  switch (action.type) {
    case SET_PHARMACIES_DATA:
      return {
        ...state,
        pharmacies: action.payload,
    };
    case SET_PHARMACIE:
      return{
        ...state,
        filterPharmacies: action.payload,
    }
    case GET_PHARMACIE:
     return{
      ...state,
      filteredPharmacies: action.payload,
     }
    case SET_PHARMACIES:

Using GET_PHARMACIE case:

But when i console.log(pharmas.userID) i get the error undefined.

Heres the GET_PHARMACIE in store from redux extension state

CodePudding user response：

it look like you're setting an empty payload on GET_PHARMACIE you don't need to dispatch anything when retrieving data in the store.

One thing that I really like to do in my projects is to systematically create a custom hook for each of my "module". Here is how I would deal with that :

usePharmas : returns all pharma usePharmasActions : return each actions availables

inside your hook, you only expose data wrapped in useSelector and actions wrapped with useDispatch.

that code will be easier to maintain and to test.