0Pricing
React Native Academy · Lezione

Lettura dello stato con useSelector

Utilizzi l’hook useSelector per leggere i valori dello store in un componente e scriva funzioni selector che ricavino dati calcolati dallo stato grezzo.

Lettura dello stato con useSelector è una lezione React Native Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Native Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Native Academy include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

What Is useSelector?

useSelector is a hook from react-redux that lets a component read data from the Redux store. It accepts a selector function as its argument. The selector receives the entire root state and returns only the piece of data that component needs. When that piece of data changes, React re-renders the component automatically.

Basic useSelector Usage

Call useSelector inside a functional component, passing an arrow function that extracts the value you need from the global state. The hook subscribes to the store and triggers a re-render only when the selected value changes, avoiding unnecessary re-renders if unrelated parts of the state update.

import React from 'react';
import { View, Text } from 'react-native';
import { useSelector } from 'react-redux';
import type { RootState } from '../../store';

export default function CounterDisplay() {
  const count = useSelector((state: RootState) => state.counter.value);

  return (
    <View>
      <Text>Count: {count}</Text>
    </View>
  );
}

Using Typed useAppSelector

In TypeScript projects, use the pre-typed useAppSelector hook you created in the hooks file. This eliminates the need to annotate the state parameter every time you call the hook. Your editor will also autocomplete state property names, making it faster to write selectors correctly.

import { useAppSelector } from '../../store/hooks';

export default function CounterDisplay() {
  // No need to annotate RootState — it is inferred automatically
  const count = useAppSelector((state) => state.counter.value);
  const status = useAppSelector((state) => state.counter.status);

  return <Text>{status === 'loading' ? 'Loading...' : count}</Text>;
}

What Is a Selector Function?

A selector is simply a function that takes the Redux state as an argument and returns a derived value. Keeping selectors separate from components promotes reuse — many components can use the same selector. You can also compose selectors to derive more complex computed values from raw state data.

// selectors.ts
import type { RootState } from './store';

export const selectCount = (state: RootState) => state.counter.value;
export const selectDoubledCount = (state: RootState) => state.counter.value * 2;

// In component:
const count = useAppSelector(selectCount);
const doubled = useAppSelector(selectDoubledCount);

Re-render Behavior of useSelector

useSelector uses strict equality (===) to compare the previous and next selected values. The component re-renders only when the returned value changes. If your selector returns an object or array literal (like state.items.filter(...)), it will return a new reference on every call, causing unnecessary re-renders. Keep selectors returning primitives or memoize them.

// This runs a filter on every store update — returns new array each time!
const activeItems = useAppSelector(
  (state) => state.todos.filter((t) => t.active) // Bad for performance
);

// Better: use a stable reference or memoize with reselect

Memoized Selectors with reselect

The reselect library (included in RTK) provides createSelector for building memoized selectors. A memoized selector caches its last result and only recomputes when its input selectors return different values. This prevents expensive derivations from running on every state update when only unrelated parts of state changed.

import { createSelector } from '@reduxjs/toolkit';
import type { RootState } from './store';

const selectTodos = (state: RootState) => state.todos.items;
const selectFilter = (state: RootState) => state.todos.filter;

export const selectFilteredTodos = createSelector(
  [selectTodos, selectFilter],
  (todos, filter) => todos.filter((t) => t.status === filter)
);

Selecting Nested State

You can drill as deep as needed into the state tree inside a selector. For complex state shapes, chain property accesses carefully and handle optional chaining (?.) to avoid runtime errors if a slice has not yet loaded data. Keep selectors readable by giving them meaningful names that describe what data they return.

const userName = useAppSelector((state) => state.user.profile?.name ?? 'Guest');
const cartTotal = useAppSelector((state) =>
  state.cart.items.reduce((sum, item) => sum + item.price * item.qty, 0)
);

Combining Multiple Selectors

A single component can call useSelector multiple times to read different pieces of state, or you can call it once and destructure from a selector that returns an object. Calling it multiple times is preferred because each subscription is independent — the component only re-renders when one of the selected values actually changes.

export default function ProfileScreen() {
  const name = useAppSelector((state) => state.user.name);
  const email = useAppSelector((state) => state.user.email);
  const isPremium = useAppSelector((state) => state.subscription.tier === 'premium');

  return (
    <View>
      <Text>{name}</Text>
      <Text>{email}</Text>
      {isPremium && <Text>Premium Member</Text>}
    </View>
  );
}

Selector Co-location Pattern

A popular pattern is to define selectors inside the slice file alongside the reducers. Prefix them with select and export them named. This co-location makes it easy to find and update a selector if the state shape changes, since both the reducer and the selector live in the same file.

// counterSlice.ts
export const selectCount = (state: RootState) => state.counter.value;
export const selectStatus = (state: RootState) => state.counter.status;

// In component:
import { selectCount, selectStatus } from './counterSlice';
const count = useAppSelector(selectCount);

Avoiding Object Returns in useSelector

If you must return an object from useSelector, use the shallowEqual comparator as the second argument. This compares each property of the returned object separately, preventing re-renders when the object's contents have not changed but the reference is new. Import shallowEqual from react-redux.

import { useSelector, shallowEqual } from 'react-redux';

const { name, email } = useAppSelector(
  (state) => ({ name: state.user.name, email: state.user.email }),
  shallowEqual
);

useSelector vs mapStateToProps

The older connect(mapStateToProps) higher-order component pattern achieves the same goal as useSelector but with more boilerplate. Hooks are the modern, preferred approach because they require less code, work inside any functional component, and compose naturally with other hooks. The connect API is still supported but not recommended for new code.

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: useSelector subscribes a component to a slice of Redux state and re-renders when that value changes, selector functions keep data derivation logic reusable and testable, and createSelector memoizes expensive computations to prevent unnecessary re-renders. Next up we explore async thunks with createAsyncThunk.

Domande Frequenti

La lezione «Lettura dello stato con useSelector» è gratuita?

Sì — il testo completo di «Lettura dello stato con useSelector» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Native Academy, passa a CoddyKit PRO. Il corso React Native Academy include 4 lezioni in totale.

Cosa imparerò in «Lettura dello stato con useSelector»?

Utilizzi l’hook useSelector per leggere i valori dello store in un componente e scriva funzioni selector che ricavino dati calcolati dallo stato grezzo. Eserciti React Native Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Native Academy?

Non è richiesta alcuna esperienza precedente. React Native Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Lettura dello stato con useSelector»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Native Academy?

Sì. Ogni lezione React Native Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione dello store Redux e del Provider
  2. Creazione di slice con createSlice
  3. Lettura dello stato con useSelector
  4. Thunk asincroni con createAsyncThunk
← Torna a React Native Academy