node.js - 我可以改变 Recoil Atom Effect 中的其他状态吗

Question

现状

我正在使用 Recoil在 React 中管理状态应用。我正在使用 Atom Effects使用 API 备份反冲值。

当我的 Atom 检测到身份验证 token 有问题时，我希望它以某种方式将该问题传达给应用程序的其余部分，以便应用程序可以更新状态。

详情

我有几个原子:

1. 存储身份验证 token 的原子，供与存储 API 通信时使用。
2. 我想保存在该存储 API 上的应用程序的各个部分的原子。

为了执行 API 同步，我有一个 apiStorageEffect 原子效果。该效果使用使用 getPromise 的反冲存储身份验证 token ，并使用 onSet 处理程序转发更改。该处理程序在调用保存方法时使用 token 。 save 方法可以检测身份验证何时失败。

当身份验证失败时，我需要触发注销事件(将 token 设置为空，并将一系列原子重置为其默认值)。

这是存储效果的最小版本:

const apiStorageEffect = (key) => async ({
    onSet,
    getPromise,
}) => {
    const authToken = await getPromise(authTokenAtom)
    if (!authToken) { return }

    onSet(async (newValue) => {
        const result = await saveToApiStorage(key, newValue, authToken)
        if (result.failed) {
            // INSERT CODE TO TRIGGER LOGOUT HERE
        }
    })
}

问题

我可以想到一些可能的路径来从一个 effect 中触发注销，但所有这些路径都涉及以某种方式将信息受影响的 atom 之外 发送到主应用程序。

1. 是否可以从原子效应中修改OTHER原子/Node 以外的原子？
2. atom effect 是否有可能发出一个可以在 React 应用程序的其他地方立即处理的事件？
3. 原子效应是否有可能调用可以更广泛地修改反冲状态的方法？

Answer 1

Atom effects仍然很新(目前不稳定)。

您想要的行为自然会通过 selector 订阅所有相关原子来实现。 ，并在那里处理效果...但是，选择器效果尚不存在。

现在执行此操作最直接的方法是将您的效果转换为使用 effect hook 执行操作的组件。 (在后坐力中解释 docs )。然后，该组件将放置在提供反冲状态的 RecoilRoot 下方。这是一个基于您问题中的信息的示例:

TS Playground

import {useCallback, useEffect} from 'react';
import {atom, RecoilRoot, useRecoilValue, useResetRecoilState} from 'recoil';

declare function saveToApiStorage (
  key: string,
  data: { value1: number; value2: number; },
  authToken: string,
): Promise<{failed: boolean}>;

export const authTokenState = atom<string | null>({
  key: 'authToken',
  default: null,
});

// the key used in your effect
export const keyState = atom({key: 'key', default: ''});
// some bit of state for the API
export const value1State = atom({key: 'value1', default: 0});
// another one
export const value2State = atom({key: 'value2', default: 0});

// this is the converted effect component
export function ApiStorageEffect (): null {
  const key = useRecoilValue(keyState);
  const authToken = useRecoilValue(authTokenState);
  const value1 = useRecoilValue(value1State);
  const value2 = useRecoilValue(value2State);
  const resetAuthToken = useResetRecoilState(authTokenState);
  const resetValue1 = useResetRecoilState(value1State);
  const resetValue2 = useResetRecoilState(value2State);

  const updateStorage = useCallback(async () => {
    if (!authToken) return;

    const result = await saveToApiStorage(key, {value1, value2}, authToken);

    if (result.failed) {
      resetAuthToken();
      resetValue1();
      resetValue2();
    }
  }, [
    authToken,
    key,
    resetAuthToken,
    resetValue1,
    resetValue2,
    value1,
    value2,
  ]);

  // use void operator for correct return type
  useEffect(() => void updateStorage(), [updateStorage]);
  return null;
}

// include underneath the recoil root
function App () {
  return (
    <RecoilRoot>
      <ApiStorageEffect />
      {/* rest of app... */}
    </RecoilRoot>
  );
}