Recoil带setSelf/onSet/resetSelf的Effect如何转为Jotai等效代码？

原Recoil代码 #

const userAtom = atom({
  key: 'user',
  default: null,
  effects: [storageEffect, userEffect],
});

function storageEffect({ setSelf, onSet, resetSelf }) {
  // 存储相关逻辑：从storage读取、同步到storage、重置等
}

function userEffect({ setSelf }) {
  // 用户状态相关逻辑：比如监听auth状态变化
}

你的Jotai尝试代码（问题点） #

const userEffect = atomEffect(() => {
  storageEffect
  userEffect
});

export const user = atom<any>(get => {
  get(firebaseUserEffect);
});

问题在于：没有正确将effect逻辑与目标atom关联，也未实现Recoil effect里setSelf/onSet/resetSelf的对应逻辑。

等效Jotai代码（基于jotai-effect） #

首先确保安装依赖：npm install jotai jotai-effect

import { atom, subscribe } from 'jotai';
import { atomEffect } from 'jotai-effect';

// 定义user atom的默认值，对应Recoil的default
const USER_DEFAULT = null;

// 对应Recoil的storageEffect
const storageEffectAtom = atomEffect((get, set) => {
  // 实现Recoil的setSelf：设置user atom的值
  const setSelf = (value) => set(userAtom, value);
  // 实现Recoil的resetSelf：重置为默认值
  const resetSelf = () => set(userAtom, USER_DEFAULT);

  // 实现Recoil的onSet：监听user atom变化
  const unsubscribe = subscribe(userAtom, (newValue) => {
    // 这里写原storageEffect中onSet的逻辑，比如同步到localStorage
    if (newValue === null) {
      localStorage.removeItem('user');
    } else {
      localStorage.setItem('user', JSON.stringify(newValue));
    }
  });

  // 初始化逻辑：从storage读取值并设置，对应Recoil effect的初始化
  const storedUser = localStorage.getItem('user');
  if (storedUser) {
    setSelf(JSON.parse(storedUser));
  }

  // 清理函数，对应Recoil effect的返回值（用于取消订阅）
  return unsubscribe;
});

// 对应Recoil的userEffect
const userEffectAtom = atomEffect((get, set) => {
  const setSelf = (value) => set(userAtom, value);

  // 这里写原userEffect的逻辑，比如监听Firebase auth状态
  const unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => {
    setSelf(firebaseUser);
  });

  // 清理函数
  return unsubscribe;
});

// 最终的user atom，关联两个effect确保它们运行
export const userAtom = atom<any>(
  (get) => {
    // 触发effect执行：通过get依赖effect atom
    get(storageEffectAtom);
    get(userEffectAtom);
    // 返回当前user atom的值
    return get(userAtom);
  },
  (get, set, update) => {
    // 更新逻辑：直接设置user atom的值
    set(userAtom, update);
  }
);

关键对应关系 #

• Recoil effects数组 → Jotai 多个独立atomEffect实例
• Recoil setSelf → Jotai set(targetAtom, value)
• Recoil onSet → Jotai subscribe(targetAtom, callback)
• Recoil resetSelf → Jotai 将atom设回预定义的默认值
• 必须通过get(effectAtom)或组件中useAtom(effectAtom)触发effect运行

内容的提问来源于stack exchange，提问作者James Lee