🏷️ Add useAppSelector and useAppDispatch hooks

packages/cra-template-typescript/template/src/hooks/index.ts

@@ -1 +1,2 @@
 export { default as useFelaEnhanced } from './useFelaEnhanced';
+export { useAppSelector, useAppDispatch } from './redux';

packages/cra-template-typescript/template/src/hooks/redux.ts

@@ -0,0 +1,6 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
+import type { RootState, AppDispatch } from 'modules/core';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

packages/cra-template-typescript/template/src/modules/auth/components/AuthContent.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import { useDispatch, useSelector } from "react-redux";
 import * as Petrus from "@ackee/petrus";
 
+import { useAppDispatch, useAppSelector } from "hooks";
 import { userEmailSelector } from '../services/selectors';
 
 function AuthContent() {
-    const dispatch = useDispatch();
-    const userEmail = useSelector(userEmailSelector);
+    const dispatch = useAppDispatch();
+    const userEmail = useAppSelector(userEmailSelector);
 
     return (
         <>

packages/cra-template-typescript/template/src/modules/core/modules/localization/components/LocalizationsAntd/LocalizationsAntd.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import type { ReactNode } from 'react';
 import ConfigProvider from 'antd/es/config-provider';
 import type { Locale as AntdLocaleData } from 'antd/es/locale-provider';
-import { useSelector } from 'react-redux';
 import { translateSelector } from '@ackee/jerome';
+import { useAppSelector } from 'hooks';
 
 export interface LocalizationsAntdProps {
     antdLocaleData: Record<string, AntdLocaleData>;
     children: ReactNode;
 }
 
 export const LocalizationsAntd = ({ antdLocaleData, children }: LocalizationsAntdProps) => {
-    const { locale } = useSelector(translateSelector);
+    const { locale } = useAppSelector(translateSelector);
 
     return <ConfigProvider locale={antdLocaleData[locale]}>{children}</ConfigProvider>;
 };

packages/cra-template-typescript/template/src/modules/core/modules/localization/components/LocalizationsRaw/LocalizationsRaw.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import type { ReactNode } from 'react';
 import { IntlProvider } from 'react-intl';
 import type { IntlConfig } from 'react-intl';
-import { useSelector } from 'react-redux';
 import { translateSelector } from '@ackee/jerome';
+import { useAppSelector } from 'hooks';
 
 export interface LocalizationsRawProps {
     intlMessages: Record<string, IntlConfig['messages']>;
@@ -12,7 +12,7 @@ export interface LocalizationsRawProps {
 }
 
 export const LocalizationsRaw = ({ intlMessages, children, onError }: LocalizationsRawProps) => {
-    const { locale } = useSelector(translateSelector);
+    const { locale } = useAppSelector(translateSelector);
 
     return (
         <IntlProvider locale={locale} key={locale} messages={intlMessages[locale]} onError={onError}>