react-redux#shallowEqual TypeScript Examples
The following examples show how to use
react-redux#shallowEqual.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: hooks.tsx From panther-frontend-dex with GNU General Public License v3.0 | 6 votes |
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
}
Example #2
Source File: SentryIdentify.tsx From clearflask with Apache License 2.0 | 6 votes |
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;
}
Example #3
Source File: utils.ts From webminidisc with GNU General Public License v2.0 | 6 votes |
export function useShallowEqualSelector<TState = RootState, TSelected = unknown>(selector: (state: TState) => TSelected): TSelected {
return useSelector(selector, shallowEqual);
}
Example #4
Source File: hooks.tsx From dyp with Do What The F*ck You Want To Public License | 6 votes |
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
}
Example #5
Source File: hooks.tsx From goose-frontend-amm with GNU General Public License v3.0 | 6 votes |
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
}
Example #6
Source File: hooks.tsx From goose-frontend-amm with GNU General Public License v3.0 | 6 votes |
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]
}
Example #7
Source File: hooks.tsx From pancake-swap-exchange-testnet with GNU General Public License v3.0 | 6 votes |
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
}
Example #8
Source File: hooks.tsx From pancake-swap-exchange-testnet with GNU General Public License v3.0 | 6 votes |
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]
}
Example #9
Source File: FormikAutoSave.tsx From assisted-ui-lib with Apache License 2.0 | 6 votes |
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;
}
Example #10
Source File: FormikAutoSave.tsx From assisted-ui-lib with Apache License 2.0 | 6 votes |
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;
}
Example #11
Source File: hooks.tsx From interface-v2 with GNU General Public License v3.0 | 6 votes |
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;
}
Example #12
Source File: hooks.tsx From panther-frontend-dex with GNU General Public License v3.0 | 6 votes |
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]
}
Example #13
Source File: useShallowSelector.ts From querybook with Apache License 2.0 | 6 votes |
/**
* 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);
}
Example #14
Source File: hooks.tsx From forward.swaps with GNU General Public License v3.0 | 6 votes |
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
}
Example #15
Source File: hooks.tsx From sushiswap-exchange with GNU General Public License v3.0 | 6 votes |
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
}
Example #16
Source File: hooks.tsx From luaswap-interface with GNU General Public License v3.0 | 6 votes |
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
}
Example #17
Source File: Rigging.tsx From majsoul-api with MIT License | 6 votes |
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>
}
Example #18
Source File: hooks.tsx From pancakeswap-testnet with GNU General Public License v3.0 | 6 votes |
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
}
Example #19
Source File: hooks.tsx From pancakeswap-testnet with GNU General Public License v3.0 | 6 votes |
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]
}
Example #20
Source File: hooks.tsx From cuiswap with GNU General Public License v3.0 | 6 votes |
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
}
Example #21
Source File: hooks.tsx From sybil-interface with GNU General Public License v3.0 | 6 votes |
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
}
Example #22
Source File: useActionState.ts From animation-editor with MIT License | 6 votes |
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;
}
Example #23
Source File: HomeNavigator.tsx From celo-web-wallet with MIT License | 6 votes |
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} />
}
Example #24
Source File: OnboardingNavigator.tsx From celo-web-wallet with MIT License | 6 votes |
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 />
}
Example #25
Source File: password.ts From celo-web-wallet with MIT License | 6 votes |
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
}
Example #26
Source File: hooks.tsx From cheeseswap-interface with GNU General Public License v3.0 | 6 votes |
export function useIsDarkMode(): boolean {
const { matchesDarkMode } = useSelector<AppState, { matchesDarkMode: boolean }>(
({ user: { matchesDarkMode } }) => ({
matchesDarkMode
}),
shallowEqual
)
return matchesDarkMode
}
Example #27
Source File: CookieConsenter.tsx From clearflask with Apache License 2.0 | 6 votes |
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;
}
}
Example #28
Source File: SetAppFavicon.tsx From clearflask with Apache License 2.0 | 6 votes |
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;
}
Example #29
Source File: ConnectedPost.tsx From clearflask with Apache License 2.0 | 6 votes |
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}
/>
);
}