fix redux

package-lock.json

@@ -2848,9 +2848,8 @@
     },
     "node_modules/@reduxjs/toolkit": {
       "version": "1.8.6",
-      "resolved": "http://bnpm.byted.org/@reduxjs/toolkit/-/toolkit-1.8.6.tgz",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.6.tgz",
       "integrity": "sha512-4Ia/Loc6WLmdSOzi7k5ff7dLK8CgG2b8aqpLsCAJhazAzGdp//YBUSaj0ceW6a3kDBDNRrq5CRwyCS0wBiL1ig==",
-      "license": "MIT",
       "dependencies": {
         "immer": "^9.0.7",
         "redux": "^4.1.2",
@@ -17559,7 +17558,7 @@
     },
     "@reduxjs/toolkit": {
       "version": "1.8.6",
-      "resolved": "http://bnpm.byted.org/@reduxjs/toolkit/-/toolkit-1.8.6.tgz",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.6.tgz",
       "integrity": "sha512-4Ia/Loc6WLmdSOzi7k5ff7dLK8CgG2b8aqpLsCAJhazAzGdp//YBUSaj0ceW6a3kDBDNRrq5CRwyCS0wBiL1ig==",
       "requires": {
         "immer": "^9.0.7",

src/hook.ts

+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import type { RootState, AppDispatch } from "./store";
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/reducers/chatSlice.ts

 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { RootState } from "../store";
 
-const initialState = "";
+export interface chatState {
+  message: string;
+}
+
+const initialState: chatState = {
+  message: "",
+};
 
 const chatSlice = createSlice({
   name: "chat",
   initialState,
   reducers: {
     postChat: (state, action: PayloadAction<string>) => {
-      state = action.payload;
+      state.message = action.payload;
     },
   },
 });
 
 export const { postChat } = chatSlice.actions;
-export const selectChat = (state: RootState) => state.chat;
+export const selectChat = (state: RootState) => state.chat.message;
 export default chatSlice.reducer;

src/reducers/joinSlice.ts

 import { createSlice } from "@reduxjs/toolkit";
 import { RootState } from "../store";
 
-const initialState = false;
+export interface JoinState {
+  value: boolean;
+}
+
+const initialState: JoinState = {
+  value: false,
+};
 
 const joinedSlice = createSlice({
   name: "join",
   initialState,
   reducers: {
-    setJoined(state) {
-      state = true;
+    setJoined: (state) => {
+      state.value = true;
     },
-    setUnJoined(state) {
-      state = false;
+    setUnJoined: (state) => {
+      state.value = false;
     },
   },
 });
 
 export const { setJoined, setUnJoined } = joinedSlice.actions;
-export const selectJoined = (state: RootState) => state.join;
+export const selectJoined = (state: RootState) => state.join.value;
 export default joinedSlice.reducer;

src/ui/WaitRoom.tsx

@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import { ygopro } from "../api/idl/ocgcore";
 import { fetchDeck, IDeck } from "../api/Card";
 import "../css/WaitRoom.css";
-import { useDispatch, useSelector } from "react-redux";
+import { useAppDispatch, useAppSelector } from "../hook";
 import { setJoined, selectJoined } from "../reducers/joinSlice";
 import { postChat, selectChat } from "../reducers/chatSlice";
 
@@ -32,7 +32,7 @@ export default function WaitRoom() {
 
   const ws = useRef<WebSocket | null>(null);
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const { player, passWd, ip } = params;
 
@@ -229,8 +229,8 @@ export default function WaitRoom() {
     };
   }, [ws]);
 
-  const joined = useSelector(selectJoined);
-  const chat = useSelector(selectChat);
+  const joined = useAppSelector(selectJoined);
+  const chat = useAppSelector(selectChat);
 
   const handleChoseDeck = async () => {
     if (ws.current) {