Use typed selector hooks.

src/components/ConnectPage.tsx

@@ -1,12 +1,12 @@
-import { useSelector } from "react-redux";
 import { useLocation } from "react-router";
 import { Redirect } from "react-router-dom";
 
+import { useAppSelector } from "app/hooks";
 import ConnectForm from "components/ConnectForm";
 import { selectSocket, SocketState } from "modules/socket/slice";
 
 const ConnectPage: React.FC = () => {
-  const socket = useSelector(selectSocket);
+  const socket = useAppSelector(selectSocket);
   const location = useLocation();
 
   // If the socket is open and we are logged in, we can proceed to the app.

src/components/Footer.tsx

@@ -1,14 +1,14 @@
 import { FC } from "react";
-import { useSelector } from "react-redux";
 
+import { useAppSelector } from "app/hooks";
 import LoginStatusPane from "modules/login/LoginStatusPane";
 import { selectLogin } from "modules/login/slice";
 import { selectSocket } from "modules/socket/slice";
 import SocketStatusPane from "modules/socket/SocketStatusPane";
 
 const Footer: FC = () => {
-  const login = useSelector(selectLogin);
-  const socket = useSelector(selectSocket);
+  const login = useAppSelector(selectLogin);
+  const socket = useAppSelector(selectSocket);
 
   return (
     <footer className="hidden md:flex items-center justify-center">

src/components/SolsticeApp.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
-import { useSelector } from "react-redux";
 import { Switch, Redirect, Route, useLocation } from "react-router-dom";
 
+import { useAppSelector } from "app/hooks";
 import ConnectPage from "components/ConnectPage";
 import Header from "components/Header";
 import Footer from "components/Footer";
@@ -27,7 +27,7 @@ const MainPane: FC = () => {
 };
 
 const ConnectedApp: FC = ({ children }) => {
-  const socket = useSelector(selectSocket);
+  const socket = useAppSelector(selectSocket);
   const location = useLocation();
 
   if (socket.state !== SocketState.Open) {

src/modules/room/RoomsPane.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react";
-import { useSelector } from "react-redux";
 import { useParams, useRouteMatch } from "react-router";
 import { Switch, Route } from "react-router-dom";
 
+import { useAppSelector } from "app/hooks";
 import { decode } from "modules/base64";
 import { selectLogin } from "modules/login/slice";
 import { RoomState, selectAllRooms } from "modules/room/slice";
@@ -33,8 +33,8 @@ interface UrlParams {
 }
 
 const RoomsPaneInner: FC<{}> = () => {
-  const login = useSelector(selectLogin);
-  const rooms = useSelector(selectAllRooms);
+  const login = useAppSelector(selectLogin);
+  const rooms = useAppSelector(selectAllRooms);
   const { roomId } = useParams<UrlParams>();
 
   // When we have not chosen a room, we always show the list. For small screens

src/modules/user/UsersPane.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react";
-import { useSelector } from "react-redux";
 import { useParams, useRouteMatch } from "react-router";
 import { Switch, Route } from "react-router-dom";
 
+import { useAppSelector } from "app/hooks";
 import { decode } from "modules/base64";
 import { UserMap, selectAllUsers } from "modules/user/slice";
 import UserDetails from "modules/user/UserDetails";
@@ -46,7 +46,7 @@ const UserInfoPane: FC<Props> = ({ users }) => {
 
 const UsersPane: FC<{}> = () => {
   const { path } = useRouteMatch();
-  const users = useSelector(selectAllUsers);
+  const users = useAppSelector(selectAllUsers);
 
   return (
     <div className="h-full w-full flex">