Tiny Atom 开源项目教程

Tiny Atom 开源项目教程

tiny-atom Pragmatic state management. 项目地址: https://gitcode.com/gh_mirrors/ti/tiny-atom

1. 项目介绍

Tiny Atom 是一个轻量级的状态管理库，旨在为 React 和 Preact 提供一个简洁且高效的状态管理解决方案。它于2017年创建，旨在提供一个比 Redux 更简单、更用户友好的替代方案。Tiny Atom 通过跟踪和去重嵌套的订阅更新，以及仅在计算状态选择发生变化时重新渲染，实现了高效的重新渲染。

2. 项目快速启动

安装

首先，使用 npm 安装 Tiny Atom：

npm install tiny-atom

示例代码

以下是一个简单的示例，展示了如何使用 Tiny Atom 进行状态管理：

import React from 'react';
import { createAtom, Provider, useSelector, useActions } from 'tiny-atom';

// 创建一个 atom 实例
const atom = createAtom({
  state: {
    user: null,
    err: null,
  },
  actions: {
    async auth({ get, set, actions }) {
      if (get().user) return;
      const token = localStorage.getItem('access-token');
      try {
        const [user] = await fetch('/authenticate', { token }).then((res) => res.json());
        set({ user });
      } catch (err) {
        set({ err });
      }
      actions.log();
    },
    log({ get }) {
      console.log(get().user.name);
    },
  },
});

// 主应用组件
export default function App() {
  return (
    <Provider atom={atom}>
      <Dashboard />
    </Provider>
  );
}

// 仪表盘组件
function Dashboard() {
  const [auth] = useActions();
  const [user, err] = useSelector((state) => ({
    user: state.user,
    err: state.err,
  }));

  useEffect(() => {
    auth();
  }, []);

  if (!user) return <div>Loading</div>;
  if (err) return <div>Yikes</div>;
  return <div>Hello, {user.name}</div>;
}

3. 应用案例和最佳实践

应用案例

Tiny Atom 适用于需要轻量级状态管理的 React 或 Preact 项目。例如，一个简单的用户认证系统可以通过 Tiny Atom 轻松实现状态管理和异步操作。

最佳实践

1. 模块化状态管理：将状态和操作分模块管理，避免单一文件过于臃肿。
2. 使用选择器优化渲染：通过 useSelector 选择器优化组件的渲染，确保仅在相关状态变化时重新渲染。
3. 异步操作处理：在 actions 中处理异步操作，确保状态更新和错误处理逻辑清晰。

4. 典型生态项目

Zustand

Zustand 是一个现代的状态管理库，与 Tiny Atom 类似，提供了一个简洁的 API 来管理全局状态。Zustand 更适合现代 React 项目，尤其是那些需要更灵活状态管理的项目。

Recoil

Recoil 是 Facebook 推出的实验性状态管理库，专注于原子状态和派生状态的管理。Recoil 提供了更高级的状态抽象，适合需要复杂状态管理的项目。

React Query

React Query 是一个用于管理远程数据的状态管理库，特别适合处理 API 请求和缓存。它与 Tiny Atom 结合使用，可以实现更高效的数据管理和状态更新。

通过这些生态项目的结合，可以构建更强大和灵活的前端应用。

tiny-atom Pragmatic state management. 项目地址: https://gitcode.com/gh_mirrors/ti/tiny-atom