Teaful 开源项目教程

1. 项目介绍

Teaful 是一个轻量级、易于使用且功能强大的 React 状态管理库。它的核心优势在于其极小的体积（不到 1KB）和简洁的 API，使得开发者无需复杂的配置即可快速上手。Teaful 的设计理念是让状态管理变得简单直观，避免了传统状态管理库中常见的复杂性，如 actions、reducers、selectors、connect、providers 等。

2. 项目快速启动

安装

首先，你需要在你的项目中安装 Teaful：

yarn add teaful
# 或者使用 npm
npm install teaful --save

初始化 Store

接下来，你可以创建一个简单的 Store 并初始化它：

import createStore from "teaful";

// 初始化 Store
const [useStore] = createStore({
  username: "Aral",
  count: 0,
  age: 31,
  cart: {
    price: 0,
    items: []
  }
});

使用 Store

在你的组件中使用 useStore 钩子来访问和更新状态：

function Example() {
  const [username, setUsername] = useStore.username();
  const [cartPrice, setCartPrice] = useStore.cart.price();

  return (
    <>
      <button onClick={() => setUsername("AnotherUserName")}>
        Update {username}
      </button>
      <button onClick={() => setCartPrice((v) => v + 1)}>
        Increment price: {cartPrice}€
      </button>
    </>
  );
}

3. 应用案例和最佳实践

案例1：简单的计数器

import createStore from "teaful";

const [useStore] = createStore({ count: 0 });

function Counter() {
  const [count, setCount] = useStore.count();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount((v) => v + 1)}>+</button>
      <button onClick={() => setCount((v) => v - 1)}>-</button>
      <button onClick={() => setCount(0)}>reset</button>
    </div>
  );
}

案例2：表单状态管理

import createStore from "teaful";

const [useStore] = createStore({
  firstName: "",
  lastName: ""
});

function ExampleOfForm() {
  const [formFields, setFormFields] = useStore();

  return Object.entries(formFields).map(([key, value]) => (
    <input
      defaultValue={value}
      type="text"
      key={key}
      onChange={(e) => setFormFields[key](e.target.value)}
    />
  ));
}

4. 典型生态项目

Teaful 作为一个轻量级的状态管理库，可以与其他 React 生态项目无缝集成。以下是一些典型的生态项目：

• React Router: 用于路由管理，与 Teaful 结合可以轻松管理路由状态。
• Axios: 用于网络请求，Teaful 可以轻松管理请求状态和数据。
• React Query: 用于数据获取和缓存，与 Teaful 结合可以实现高效的数据管理。

通过这些生态项目的结合，Teaful 可以为你的 React 应用提供一个完整且高效的状态管理解决方案。