Selettori e hook useSelector in Redux

Nelle lezioni precedenti abbiamo memorizzato nello store i dati dei prodotti. Come possiamo ottenerli dallo store?

Per fare ciò, è necessario scrivere una funzione selettore. Questa funzione sa come estrarre un determinato frammento di informazioni dallo stato memorizzato nello store e aiuta a evitare di scrivere codice ripetitivo quando l'applicazione cresce. In input questa funzione accetta lo state, e in output restituisce la fetta di stato necessaria. Ad esempio così:

jsxconst selectValue = state => state.some.value

All'inizio del tutorial si menzionava che lo store ha un metodo getState. E noi potremmo facilmente usarlo per ottenere il valore dello stato:

jsxconst value = selectValue(store.getState())

Il problema è che i nostri componenti React non possono accedere direttamente allo store, poiché è vietato importarlo nel file del componente. Ma abbiamo la possibilità di ottenere i dati nel componente utilizzando l'hook di React-Redux useSelector. Inoltre, con questo hook i nostri componenti riceveranno sempre solo dati aggiornati:

jsxconst count = useSelector(selectValue)