Valtio
- 添加 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