Jotai状态管理：原子组合的艺术与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00328/article/details/148362767

Jotai状态管理：原子组合的艺术与实践

jotai 👻 Primitive and flexible state management for React 项目地址: https://gitcode.com/gh_mirrors/jo/jotai

前言

在现代前端开发中，状态管理一直是构建复杂应用的核心挑战之一。Jotai作为一款轻量级的状态管理库，以其原子化的设计理念脱颖而出。本文将深入探讨Jotai中原子(atom)的组合技巧，帮助开发者构建更加灵活和可维护的状态管理系统。

原子基础回顾

在Jotai中，原子是最基础的状态单元。我们可以通过atom()函数创建两种基本类型的原子：

原始原子：包含初始值的简单原子
派生原子：基于其他原子计算得出的原子

// 原始原子
const countAtom = atom(0);

// 派生原子（只读）
const doubledAtom = atom((get) => get(countAtom) * 2);

原子组合模式

1. 基础派生原子

派生原子通过get函数访问其他原子的值，这是最简单的组合方式：

const textAtom = atom('hello');
const textLenAtom = atom((get) => get(textAtom).length);

这种只读原子适用于那些仅依赖于其他原子值的计算场景。

2. 可写派生原子

当需要同时读取和修改原子时，我们可以定义write函数：

const textAtom = atom('hello');
const textUpperCaseAtom = atom(
  (get) => get(textAtom).toUpperCase(),
  (get, set, newText) => {
    set(textAtom, newText);
  }
);

这种模式实现了对原始原子的封装，可以隐藏实现细节，只暴露必要的接口。

实用组合技巧

1. 默认值覆盖

有时我们需要在派生原子中提供覆盖默认值的能力：

const rawNumberAtom = atom(10.1);
const roundNumberAtom = atom((get) => Math.round(get(rawNumberAtom)));
const overwrittenAtom = atom(null);

const numberAtom = atom(
  (get) => get(overwrittenAtom) ?? get(roundNumberAtom),
  (get, set, newValue) => {
    const nextValue = typeof newValue === 'function' 
      ? newValue(get(numberAtom)) 
      : newValue;
    set(overwrittenAtom, nextValue);
  }
);

这种模式在需要临时覆盖计算值时特别有用。

2. 与外部存储同步

Jotai原子可以轻松地与外部存储（如localStorage）同步：

const baseAtom = atom(localStorage.getItem('mykey') || '');
const persistedAtom = atom(
  (get) => get(baseAtom),
  (get, set, newValue) => {
    const nextValue = typeof newValue === 'function' 
      ? newValue(get(baseAtom)) 
      : newValue;
    set(baseAtom, nextValue);
    localStorage.setItem('mykey', nextValue);
  }
);

注意：在多Provider环境下使用时需要考虑同步问题。

3. 扩展原子功能

Jotai提供了多种atomWith*工具函数，但有时我们需要组合它们的功能：

const reducer = (state, action) => {
  // reducer逻辑
};
const baseAtom = atomWithStorage('mykey', '');
const derivedAtom = atom(
  (get) => get(baseAtom),
  (get, set, action) => {
    set(baseAtom, reducer(get(baseAtom), action));
  }
);

这种模式允许我们创建具有多重特性的自定义原子。

动作原子模式

动作原子(Action Atoms)是Jotai中一种强大的模式，它将状态修改逻辑封装为独立的原子：

const baseAtom = atom(0);
export const countAtom = atom((get) => get(baseAtom));
export const incAtom = atom(null, (get, set) => {
  set(baseAtom, (prev) => prev + 1);
});
export const decAtom = atom(null, (get, set) => {
  set(baseAtom, (prev) => prev - 1);
});

这种模式的优势在于：

更好的代码组织
支持按需加载
便于代码拆分和tree-shaking

我们还可以组合动作原子：

export const dispatchAtom = atom(null, (get, set, action) => {
  if (action === 'INC') set(incAtom);
  else if (action === 'DEC') set(decAtom);
  else throw new Error('未知动作');
});

特殊注意事项

当需要在原子中存储函数时，需要特别注意：

// 正确做法：将函数包装在对象中
const doublerAtom = atom({ callback: (n) => n * 2 });

// 使用
const [doubler] = useAtom(doublerAtom);
const result = doubler.callback(50); // 100

这是因为Jotai会将纯函数识别为派生原子的getter函数，而非普通值。