• 添加 valtio store
• 添加 valtio eslint plugin
• store通过context从根节点注入
• 新增 chat store
• 新增 join store
• 新增 player store
• 新增 mora store
• 定义 duel store 类型
• service之中使用store
• components之中使用store
• 基础测试
• 移除redux相关代码
  • 注释掉相关代码
  • 移除

见这个issue: #3 (closed)

尝试写一些基础的代码，尝试在redux的基础上加入valtio store，最后再将redux去掉。

示例代码：

// ts 之中使用 Valtio
import { moraStore } from "@/stores"; // add

export default function handleDuelStart(_pb: ygopro.YgoStocMsg) {
  const dispatch = store.dispatch;
  dispatch(duelStart());

  moraStore.duelStart = true; // 直接修改 store
}

// 组件之中使用 Valtio
const Mora = () => {
  const snapMora = useSnapshot(stateMora); // 获取 snapshot

  const handleSelectMora = (selected: string) => {
    sendHandResult(selected);
    dispatch(unSelectHandAble());
    stateMora.selectHandAble = false; // 直接修改 store
  };

  const handleSelectTp = (isFirst: boolean) => {
    sendTpResult(isFirst);
    dispatch(unSelectTpAble());
    stateMora.selectTpAble = false;
  };

  return <>{snapMora.selectHandAble}<> // 从 snapshot 上读取状态

简单来说就是：

• ts中store搭配subscribe和subscribeKey
• 组件中useSnapshot搭配useEffect