-1

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

greardrear
  • 1
  • 5
  • Hi ! You can certainly notice on the questions you have read that people share (or are asked to share) some test data and a sample code to reproduce the issue. This way, people are able to help you :) – Philippe Sep 26 '21 at 13:56
  • 2
    Jerry Maguire would say "show me the code!" – PA. Sep 26 '21 at 13:57
  • It’s likely that your render code is running prior to the data being available. Your render code should be able to handle situations where the data isn’t there yet (display “loading…” or similar). this is just a guess since you haven’t posted any code - please do. – James Sep 26 '21 at 13:58
  • Probably you didnot provide the initial state in your redux reducer correctly – ABDULLOKH MUKHAMMADJONOV Sep 26 '21 at 14:03
  • Install Redux firefox/chrome extension : https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en And don't forget to enable dev options on your redux implementation : https://stackoverflow.com/questions/60838038/how-to-enable-redux-devtools this is really usefull to debug, once installed, open redux tab and click "state" to see all your store – Kevin Gilbert Sep 26 '21 at 15:03
  • 1
    @KevinGilbert i've added the screen shot in the question, the state of the GET_PHARMACIES filteredPharmacies has label and userID so i should be able to access it? – greardrear Sep 26 '21 at 15:07

1 Answers1

0

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.

Kevin Gilbert
  • 903
  • 8
  • 21