How to use the react-redux.useSelector function in react-redux

const DebugHoverPolygon = (props) => {
  // When the window / viewport resizes, set the width and
  // height of the canvas element.
  const el = useRef(null)

  const enabled = useSelector(
    (state) => state.flags.INFO_BUBBLE_HOVER_POLYGON.value || false
  )
  const hoverPolygon = useSelector(
    (state) => state.infoBubble.hoverPolygon || []
  )

  const handleResize = () => {
    if (!el.current) return

    el.current.width = window.innerWidth
    el.current.height = window.innerHeight
  }

  useEffect(() => {
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  })

function CompassNeedleResponse (props) {
  const symbols = useSelector(state => state.app.symbols)
  const activeNeedle = useSelector(state => state.app.activeNeedle)
  const dispatch = useDispatch()
  const el = useRef(null)

  const initialRotation = random() * 360 // Set at random start position

  // for now auto-rotate 1 number on render.
  const numberOfSymbols = symbols.length
  const randomNumbers = getUniqueRandomIntegers(numberOfSymbols, 3)
  const responseEmojis = randomNumbers.map((num) => symbols[num])
  const rotateDirection = Math.round(random()) ? 1 : -1
  const rotateQuantity = Math.ceil(random()) // a number between 2 and 3 inclusive
  const rotateTo = getRotation(randomNumbers[0], numberOfSymbols)

  // calc rotate to: if diff between current and destination is less than
  // one full rotation, then add a full rotation.

const App = () => {
  const classes = useStyles();
  const dispatch = useDispatch();
  const menuExpanded = useSelector(selectMenuOpen)

  const toggleMenuOpen = e => {
    dispatch(actions.setMenuOpen(!menuExpanded))
  }


  return (
    
      

      <div>
        
        </div>

const Todos = () => {
  const {appStyle, todosStyle} = style;

  const dispatch = useDispatch();
  const {goBack} = useNavigation();
  const [todoText, setTodoText] = useState('');

  const todos = useSelector(selectTodos);

  const _addTodo = () => {
    if (todoText !== '') {
      dispatch(addTodo(todoText));
      setTodoText('');
    }
  };

  const _goBack = () => goBack();
  const _toggleTodo = id => dispatch(toggleTodo(id));
  const _deleteTodo = id => dispatch(deleteTodo(id));

  return (

const ClientCell = ({
    client,
    client_id,
    client_info,
    domain,
    reason,
}) => {
    const { t } = useTranslation();
    const dispatch = useDispatch();
    const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
    const processingRules = useSelector((state) => state.filtering.processingRules);
    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
    const [isOptionsOpened, setOptionsOpened] = useState(false);

    const autoClient = autoClients.find((autoClient) => autoClient.name === client);
    const source = autoClient?.source;
    const whoisAvailable = client_info && Object.keys(client_info.whois).length > 0;
    const clientName = client_info?.name || client_id;
    const clientInfo = client_info && {
        ...client_info,
        whois_info: client_info?.whois,
        name: clientName,
    };

    const id = nanoid();

const Confirm = (props: IConfirmProps) => {
  const classes = useStyles();

  const [appName, setAppName] = React.useState('');
  const [attachments, setAttachments] = React.useState([]);
  const [lastChangedDateTime, setLastChangedDateTime] = React.useState('');
  const [instanceMetaObject, setInstanceMetaObject] = React.useState({});
  const [userLanguage, setUserLanguage] = React.useState('nb');
  const [isSubmitting, setIsSubmitting] = React.useState(false);

  const applicationMetadata: IApplicationMetadata = useSelector((state: IRuntimeState) => state.applicationMetadata.applicationMetadata);
  const instance: IInstance = useSelector((state: IRuntimeState) => state.instanceData.instance);
  const language: any = useSelector((state: IRuntimeState) => state.language.language);
  const parties: IParty[] = useSelector((state: IRuntimeState) => state.party.parties);
  const validations: IValidations = useSelector((state: IRuntimeState) => state.formValidations.validations);

  const routeParams: any = props.match.params;

  const { instanceId } = window as Window as IAltinnWindow;
  const layout = useSelector((state: IRuntimeState) => state.formLayout.layout);
  const textResources = useSelector((state: IRuntimeState) => state.textResources.resources);

  const isLoading = (): boolean => (
    !attachments ||
    !instanceMetaObject ||
    !lastChangedDateTime ||
    !appName ||
    !instance ||
    !lastChangedDateTime ||
    !parties

const _ProgramsEditPage: React.FC = () => {
  const dispatch = useDispatch();

  const createProgramInfo = useSelector(createProgramInfoSelector);
  const description = useSelector(programDescriptionSelector);
  const isProgram = description && description.programDetails;

  const updateDescription = useCallback(
    () => dispatch(dispatchProgramDescriptionWithId(description!.id)),
    [description]
  );

  return (
     (

useEffect(() => {
    if (statistics) {
      const c = statistics.cities.find(c => c.place_slug == slug);
      setCity(c);
      setTitle(c.place);
    }
  }, [slug, statistics]);

  const selectedCurrency = useSelector(state =>
    state.account
      ? state.currencies.find(c => c.id === state.account.currency)
      : null
  );

  const nomadlist = useSelector(state =>
    state.user.socialNetworks ? state.user.socialNetworks.nomadlist || {} : {}
  );

  const [isModified, setIsModified] = useState(false);

  const reduxTransaction = useSelector(state => state.transactions);

  const [isSaving, setIsSaving] = useState(false);

  const saveModification = () => {
    setIsSaving(true);
    dispatch(
      AccountsActions.setPreferences({
        nomadlist: categoriesToExclude
      })
    )

const CategoryListContainer = ({ categoryId }) => {
  const dispatch = useDispatch();
  const items = useSelector(state => state.categoryList.items);
  const currencySymbol = useSelector(state => state.magento.currency.default_display_currency_symbol);
  const totalCount = useSelector(state => state.categoryList.totalCount);
  const status = useSelector(state => state.categoryList.status);
  const errorMessage = useSelector(state => state.categoryList.errorMessage);
  const loadingMoreStatus = useSelector(state => state.categoryList.loadingMoreStatus);
  const dispatchOpenSelectedProductAction = (product, children) => dispatch(openSelectedProduct(product, children));
  const loadProducts = (_categoryId, offset, sortOrder) => dispatch(getCategoryProducts(_categoryId, offset, sortOrder));
  const showHorizontalList = false;
  const columnCount = 2;
  const canLoadMoreProducts = items.length < totalCount;

  const stateAccessor = 'categoryList';

  return (