diff --git a/src/containers/Footer.js b/src/containers/Footer.js
index 6bf7ddb..2f76a3a 100644
--- a/src/containers/Footer.js
+++ b/src/containers/Footer.js
@@ -1,34 +1,29 @@
-import React from "react";
-import { connect } from "react-redux";
+import { useSelector } from "react-redux";
-import { SocketSliceState } from "../modules/websocket/slice";
+import { RootState } from "../app/store";
+import { selectSocket } from "../modules/websocket/slice";
import LoginStatusPane from "../components/LoginStatusPane";
import SocketStatusPane from "../components/SocketStatusPane";
-interface Props {
- //login: any,
- socket: SocketSliceState,
-};
+const Footer = () => {
+ const socket = useSelector(selectSocket);
-const Footer = ({ socket }) => {
- return (
-
- );
-};
+ return (
+
+ );
+}
-const mapStateToProps = ({ socket }) => ({ socket });
-
-export default connect(mapStateToProps)(Footer);
+export default Footer;
diff --git a/src/modules/websocket/slice.ts b/src/modules/websocket/slice.ts
index 9344022..fd0d415 100644
--- a/src/modules/websocket/slice.ts
+++ b/src/modules/websocket/slice.ts
@@ -42,6 +42,8 @@ export const socketSlice = createSlice({
export const { socketOpen, socketOpened, socketClose, socketClosed } =
socketSlice.actions;
+export const selectSocket = (state: RootState) => state.socket;
+
export const socketSendMessage = createAction