0PricingLogin▼
React Native Academy · Lesson

Reading State with useSelector

Use the useSelector hook to read values from the store in a component, write selector functions that derive computed data from raw state.

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>
  );
}

All lessons in this course

  1. Setting Up the Redux Store and Provider
  2. Creating Slices with createSlice
  3. Reading State with useSelector
  4. Async Thunks with createAsyncThunk
← Back to React Native Academy