Merge branch 'feat/observeStore' into 'main'

Feat/observe store

See merge request mycard/Neos!24

src/store.ts

 /*
  * 全局状态存储模块
  * */
-import { configureStore } from "@reduxjs/toolkit";
+import { configureStore, Unsubscribe } from "@reduxjs/toolkit";
 import joinedReducer from "./reducers/joinSlice";
 import chatReducer from "./reducers/chatSlice";
 import playerReducer from "./reducers/playerSlice";
@@ -18,5 +18,25 @@ export const store = configureStore({
   },
 });
 
+// Ref: https://github.com/reduxjs/redux/issues/303
+export function observeStore<T>(
+  select: (state: RootState) => T,
+  onChange: (prev: T | null, cur: T) => void
+): Unsubscribe {
+  let currentState: T | null = null;
+
+  const changeHook = () => {
+    const nextState = select(store.getState());
+    if (nextState !== currentState) {
+      onChange(currentState, nextState);
+      currentState = nextState;
+    }
+  };
+
+  const unsubscribe = store.subscribe(changeHook);
+  changeHook();
+  return unsubscribe;
+}
+
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;

src/ui/Duel/simpleDuel/mod.tsx

@@ -6,7 +6,7 @@
 import { IDuelPlate, TypeSelector } from "../duel";
 import { useAppSelector } from "../../../hook";
 import React, { useEffect, useRef } from "react";
-import type { RootState } from "../../../store";
+import { RootState, observeStore } from "../../../store";
 import * as BABYLON from "@babylonjs/core";
 import renderHands from "./hands";
 import renderMonsters from "./monsters";
@@ -107,6 +107,26 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       });
     }, [canvasRef, hands]);
 
+    useEffect(() => {
+      // 监听状态变化，并实现动画
+
+      const onHandsChange = (
+        prev_hands: CardMeta[] | null,
+        cur_hands: CardMeta[]
+      ) => {
+        console.log(prev_hands, "change to", cur_hands);
+      };
+
+      const unsubscribe = observeStore(
+        this.handsSelector || defaultHandsSelector,
+        onHandsChange
+      );
+      return () => {
+        // 取消监听
+        unsubscribe();
+      };
+    }, []);
+
     return (
       <canvas
         width={window.innerWidth}