react-redux#shallowEqual TypeScript Examples

export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode,
    }),
    shallowEqual
  )
  return userDarkMode === null ? matchesDarkMode : userDarkMode
}

SentryIdentifyUser = () => {
  const user = useSelector<ReduxState, Client.UserMe | undefined>(state => state.users.loggedIn.user, shallowEqual);
  if (windowIso.isSsr) {
    return null;
  } else if (user) {
    trackingBlock(() => {
      Sentry.setUser({
        id: user.userId,
        username: user.name,
        email: user.email,
      });
    });
  } else {
    Sentry.configureScope(scope => scope.setUser(null));
  }
  return null;
}

export function useShallowEqualSelector<TState = RootState, TSelected = unknown>(selector: (state: TState) => TSelected): TSelected {
    return useSelector(selector, shallowEqual);
}

export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode
    }),
    shallowEqual
  )

  return userDarkMode === null ? matchesDarkMode : userDarkMode
}

export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode,
    }),
    shallowEqual
  )
  return userDarkMode === null ? matchesDarkMode : userDarkMode
}

export function useDarkModeManager(): [boolean, () => void] {
  const dispatch = useDispatch<AppDispatch>()
  const { userDarkMode } = useSelector<AppState, { userDarkMode: boolean | null }>(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { userDarkMode } }) => ({
      userDarkMode,
    }),
    shallowEqual
  )
  const darkMode = useIsDarkMode()

  const toggleSetDarkMode = useCallback(() => {
    setThemeCache(!userDarkMode)
    dispatch(updateUserDarkMode({ userDarkMode: !userDarkMode }))
  }, [userDarkMode, dispatch])

  return [darkMode, toggleSetDarkMode]
}

export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode,
    }),
    shallowEqual
  )
  return userDarkMode === null ? matchesDarkMode : userDarkMode
}

export function useDarkModeManager(): [boolean, () => void] {
  const dispatch = useDispatch<AppDispatch>()
  const { userDarkMode } = useSelector<AppState, { userDarkMode: boolean | null }>(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { userDarkMode } }) => ({
      userDarkMode,
    }),
    shallowEqual
  )
  const darkMode = useIsDarkMode()

  const toggleSetDarkMode = useCallback(() => {
    setThemeCache(!userDarkMode)
    dispatch(updateUserDarkMode({ userDarkMode: !userDarkMode }))
  }, [userDarkMode, dispatch])

  return [darkMode, toggleSetDarkMode]
}

useFormikAutoSave: UseFormikAutoSave = (debounce = 1000) => {
  const [autoSaveIDs, setAutoSaveIDs] = React.useState<number[]>([]);
  const { values, isSubmitting, submitForm } = useFormikContext();
  const prevValuesRef = React.useRef(values);
  const commitRef = React.useRef(
    debouncer(async (autoSaveID: number) => {
      await submitForm();
      setAutoSaveIDs((ids) => ids.filter((id) => id > autoSaveID));
    }, debounce),
  );

  React.useEffect(() => {
    if (!shallowEqual(prevValuesRef.current, values) && !isSubmitting) {
      const autoSaveID = Date.now();
      setAutoSaveIDs((ids) => {
        ids.push(autoSaveID);
        return ids;
      });
      commitRef.current(autoSaveID);
    }
    if (!isSubmitting) {
      prevValuesRef.current = values;
    }
  }, [values, isSubmitting, setAutoSaveIDs]);

  React.useEffect(() => {
    const commit = commitRef.current;
    return () => commit.cancel();
  }, []);

  return !!autoSaveIDs.length;
}

FormikAutoSave: React.FC<{ debounce?: number }> = ({ debounce = 1000 }) => {
  const { values, dirty, isSubmitting, submitForm } = useFormikContext();
  const prevValuesRef = React.useRef(values);
  const commitRef = React.useRef(debouncer(submitForm, debounce));

  React.useEffect(() => {
    if (!shallowEqual(prevValuesRef.current, values) && dirty && !isSubmitting) {
      commitRef.current();
    }
    if (!isSubmitting) {
      prevValuesRef.current = values;
    }
  }, [values, dirty, isSubmitting]);

  React.useEffect(() => {
    const commit = commitRef.current;
    return () => commit.cancel();
  }, []);

  return null;
}

export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode,
    }),
    shallowEqual,
  );

  return userDarkMode === null ? matchesDarkMode : userDarkMode;
}

export function useDarkModeManager(): [boolean, () => void] {
  const dispatch = useDispatch<AppDispatch>()
  const { userDarkMode } = useSelector<AppState, { userDarkMode: boolean | null }>(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { userDarkMode } }) => ({
      userDarkMode,
    }),
    shallowEqual
  )
  const darkMode = useIsDarkMode()

  const toggleSetDarkMode = useCallback(() => {
    setThemeCache(!userDarkMode)
    dispatch(updateUserDarkMode({ userDarkMode: !userDarkMode }))
  }, [userDarkMode, dispatch])

  return [darkMode, toggleSetDarkMode]
}

/**
 * Use this instead of useSelect ONLY IF the select would produce
 * a new object or array and not via Reselect.
 *
 * The shallow comparsion would prevent a React state update
 * via shallow comparsion instead of ===.
 *
 * Examples to use useShallowSelect
 * - useShallowSelect((state) => ({ a: state.a, b: state.b }))
 * - useShallowSelect((state) => [...state.a, ...state.b])
 *
 * Examples to NOT use useShallowSelect
 * - useSelect((state) => state.a)
 * - useSelect(reselectSelector)
 *
 * @param selector The same selector you would put in useSelect
 */
export function useShallowSelector<
    F extends (state: IStoreState, ...args: any[]) => any
>(selector: F): ReturnType<F> {
    return useSelector(selector, shallowEqual);
}

export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode
    }),
    shallowEqual
  )

  return userDarkMode === null ? matchesDarkMode : userDarkMode
}

export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode
    }),
    shallowEqual
  )

  return userDarkMode === null ? matchesDarkMode : userDarkMode
}

export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode
    }),
    shallowEqual
  )

  return userDarkMode === null ? matchesDarkMode : userDarkMode
}

function RiggingSessions(props: {}): JSX.Element {
	return null;
	const sessions = useSelector((state: IState) => [], shallowEqual);

	if (!sessions) {
		return null;
	}

	return <Container>
		{sessions.map(session => <Row key={session._id} className="mt-2">
			<Session session={session} />
		</Row>)}
	</Container>
}

export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode,
    }),
    shallowEqual
  )
  return userDarkMode === null ? matchesDarkMode : userDarkMode
}

export function useDarkModeManager(): [boolean, () => void] {
  const dispatch = useDispatch<AppDispatch>()
  const { userDarkMode } = useSelector<AppState, { userDarkMode: boolean | null }>(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { userDarkMode } }) => ({
      userDarkMode,
    }),
    shallowEqual
  )
  const darkMode = useIsDarkMode()

  const toggleSetDarkMode = useCallback(() => {
    setThemeCache(!userDarkMode)
    dispatch(updateUserDarkMode({ userDarkMode: !userDarkMode }))
  }, [userDarkMode, dispatch])

  return [darkMode, toggleSetDarkMode]
}

export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode
    }),
    shallowEqual
  )

  return userDarkMode === null ? matchesDarkMode : userDarkMode
}

export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode,
    }),
    shallowEqual
  )

  return userDarkMode === null ? matchesDarkMode : userDarkMode
}

useActionState = <T>(selector: Selector<T>, { shallow = true } = {}): T => {
	const result = useSelector<ApplicationState, T>(
		(state) => {
			const actionState = getActionStateFromApplicationState(state);
			return selector(actionState);
		},
		shallow ? shallowEqual : undefined,
	);
	return result;
}

export function HomeNavigator() {
  const isUnlocked = useAccountLockStatus()

  // Force navigation to fail screen if providers are unable to connect
  const isConnected = useAppSelector((s) => s.wallet.isConnected, shallowEqual)
  if (isConnected === false) throw new Error('Unable to connect to network.')

  // If password has been entered already
  if (isUnlocked) {
    return (
      <ScreenFrame>
        <Outlet />
      </ScreenFrame>
    )
  }

  // If wallet exists in storage but is not unlocked yet
  if (hasAccounts() || hasAccount_v1()) {
    return <LoginScreen />
  }

  // Otherwise, account must not be set up yet
  return <Navigate to="/setup" replace={true} />
}

export function OnboardingNavigator() {
  // If wallet exists in storage don't allow user back into onboarding flow
  if (hasAccounts() || hasAccount_v1()) {
    return <Navigate to="/" replace={true} />
  }

  // Force navigation to fail screen if providers are unable to connect
  const isConnected = useAppSelector((s) => s.wallet.isConnected, shallowEqual)
  if (isConnected === false) throw new Error('Unable to connect to network.')

  // Otherwise, render screen as normal
  return <Outlet />
}

export function useAccountLockStatus() {
  // Using individual selects here to avoid re-renders this high-level
  // components that use this hook
  const address = useAppSelector((s) => s.wallet.address, shallowEqual)
  const type = useAppSelector((s) => s.wallet.type, shallowEqual)
  const isWalletUnlocked = useAppSelector((s) => s.wallet.isUnlocked, shallowEqual)

  // Call to hasPasswordCached() is for security reasons (so user can't change a persisted value in local storage)
  // and isWalletUnlocked is for flow reasons - so the UI reacts to changes after authenticating
  const isUnlocked = !!(
    address &&
    isWalletUnlocked &&
    (hasPasswordCached() || type === SignerType.Ledger)
  )

  return isUnlocked
}

export function useIsDarkMode(): boolean {
  const { matchesDarkMode } = useSelector<AppState, { matchesDarkMode: boolean }>(
    ({ user: { matchesDarkMode } }) => ({
      matchesDarkMode
    }),
    shallowEqual
  )

  return matchesDarkMode
}

CookieConsenter = () => {
  const cookieConsentBuiltIn = useSelector<ReduxState, Client.BuiltIn | undefined>(state => state.conf.conf?.cookieConsent?.builtIn, shallowEqual);
  const cookieConsentCookieYes = useSelector<ReduxState, Client.CookieYes | undefined>(state => state.conf.conf?.cookieConsent?.cookieYes, shallowEqual);
  if (cookieConsentBuiltIn) {
    return (
      <BannerBuiltIn form={cookieConsentBuiltIn} />
    );
  } else if (cookieConsentCookieYes) {
    return (
      <BannerCookieYes opts={cookieConsentCookieYes} />
    );
  } else {
    trackingImplicitConsent();
    return null;
  }
}

SetAppFavicon = () => {
  const faviconUrl = useSelector<ReduxState, string | undefined>(state => state.conf.conf?.logoUrl, shallowEqual);
  if (faviconUrl) {
    if (windowIso.isSsr) {
      windowIso.setFaviconUrl(faviconUrl);
    } else {
      const faviconEl = windowIso.document.getElementById('favicon');
      if (!!faviconEl) faviconEl['href'] = faviconUrl;
    }
  }
  return null;
}

ConnectedPostById = (props: {
  postId: string;
} & Omit<React.ComponentProps<typeof ConnectedPost>, 'post'>) => {
  const { postId, server, ...ConnectedPostProps } = props;
  const ideaAndStatus = useSelector<ReduxState, { status: Status, idea?: Client.Idea } | undefined>(state => state.ideas.byId[postId], shallowEqual);
  React.useEffect(() => {
    if (ideaAndStatus?.status === undefined) {
      server.dispatch().then(d => d.ideaGet({
        projectId: server.getProjectId(),
        ideaId: postId,
      }));
    }
  }, [ideaAndStatus?.status, postId, server]);

  if (!ideaAndStatus?.idea) return null;

  return (
    <ConnectedPost
      {...ConnectedPostProps}
      server={server}
      post={ideaAndStatus.idea}
    />
  );
}