有没有更简洁的方法来组织这种 recoilJS 状态？

问题描述

我刚刚了解了 recoilJS，并一直在玩弄它，但对我所做的是否被认为是“正确的”有疑问。我的代码有效，但感觉很奇怪。

我有以下 React 函数组件：

export const TimerPanel: FC = () => {
  const gameState = useRecoilValue<GameState>(HeaderAtoms.gameState);
  const timerCount = useRecoilValue(HeaderAtoms.timerCount);
  const setTimerCounter = useSetRecoilState(HeaderAtoms.timerCounter);

  useEffect(() => {
    if (gameState === GameState.IN_PROGRESS && timerCount < 1000) {
      window.setTimeout(() => {
        setTimerCounter(timerCount + 1);
      },1000);
    }
  });

  return <NumberPanel num={timerCount} />;
};

其中相关原子和选择器定义为：

export const timerCount = atom<number>({
  key: 'Header.timerCount',default: 0
});

export const timerCounter = selector<number>({
  key: 'Header.timerCounter',get: ({ get }) => {
    return get(timerCount);
  },set: ({ get,set },newCount) => {
    if (get(gameState) === GameState.NEW) {
      set(timerCount,0);
    } else if (get(gameState) === GameState.IN_PROGRESS) {
      set(timerCount,newCount);
    }
  }
});

基本上，当游戏开始时，TimerPanel 会在游戏进行中每一秒将计时器显示增加 1。如果用户重置游戏 (GameState.NEW)，timerCount 会重置为零。如果原子/选择器未正确完成，则存在竞争条件，即游戏状态和计时器计数将重置，但计时器仍在运行并且仍会再更新一次 TimerPanel。这就是为什么我在选择器的 if 属性中有 set 块。

基本上，我担心我的 timerCounter 选择器是 timerCount 状态的过滤器/pass-thru 实体，我想知道是否有更好的方法来处理这个用例。>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）