如何实现回调更新Jotai状态并全局化connectWallet函数？

你可以通过回调参数解耦状态更新逻辑，把钱包连接的核心逻辑抽成全局函数，让状态更新操作由调用组件自行处理，具体实现如下：

1. 抽离全局的connectWallet函数 #

将连接钱包的业务逻辑单独提取到独立文件（比如utils/wallet.ts），通过onConnectSuccessful回调传递连接成功后的地址和余额，同时保留onClose参数处理模态框关闭：

// utils/wallet.ts
export const connectWallet = async (
  onConnectSuccessful: (address: string, balance: number) => void,
  onClose?: () => void
) => {
  try {
    // 保留原有的钱包连接逻辑
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    const balHex = await window.ethereum.request({
      method: 'eth_getBalance',
      params: [accounts[0], 'latest']
    });
    const balance = parseFloat(balHex) / 1e18; // 转换为ETH单位

    // 连接成功后触发回调，传递地址和余额
    onConnectSuccessful(accounts[0], balance);
    
    // 按需关闭模态框
    onClose?.();
  } catch (error) {
    console.error('钱包连接失败:', error);
    // 可扩展：添加onConnectFailed回调处理错误场景
  }
};

2. 在原组件中调用全局函数并更新Jotai状态 #

在ConnectWalletModal组件内，通过useAtom获取状态setter，定义回调函数处理Jotai原子更新，再调用全局的connectWallet：

import { connectWallet } from '../utils/wallet';
import { useAtom } from 'jotai';
import { walletAddressAtom, walletBalanceAtom, isWalletConnectedAtom } from '../atoms/walletAtoms';

export function ConnectWalletModal({ onClose }: IConnectWalletModalProps) {
  const [, setWalletAddress] = useAtom(walletAddressAtom);
  const [, setWalletBalance] = useAtom(walletBalanceAtom);
  const [, setIsWalletConnected] = useAtom(isWalletConnectedAtom);

  // 定义连接成功后的状态更新逻辑
  const handleConnectSuccess = (address: string, balance: number) => {
    setWalletAddress(address);
    setWalletBalance(balance);
    setIsWalletConnected(true);
    // setIsWalletConnecting(false); // 如有需要，在这里更新加载状态
  };

  // 触发钱包连接
  const handleConnect = async () => {
    await connectWallet(handleConnectSuccess, onClose);
  };

  return (
    <div className="modal">
      {/* 模态框内容 */}
      <button onClick={handleConnect}>连接钱包</button>
    </div>
  );
}

3. 在其他组件中复用全局函数 #

其他组件只需导入connectWallet，并传入自身需要的状态更新逻辑即可：

import { connectWallet } from '../utils/wallet';
import { useAtom } from 'jotai';
import { walletAddressAtom } from '../atoms/walletAtoms';

export function Header() {
  const [, setWalletAddress] = useAtom(walletAddressAtom);

  const handleConnect = async () => {
    await connectWallet((address) => {
      setWalletAddress(address);
      // 这里可以只处理当前组件需要的状态，比如仅更新地址
    });
  };

  return <button onClick={handleConnect}>连接钱包</button>;
}

这个方案的优势：

• 彻底解耦业务逻辑与状态更新，connectWallet成为不依赖任何组件/状态库的纯函数
• 支持在任意组件中灵活调用，只需根据组件需求自定义状态处理逻辑
• 保留了原有的错误处理能力，可按需扩展错误回调等功能

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