历经一年500+commits,React迎来状态管理的里程碑之作

历经一年500+commits,我们很高兴宣布React迎来状态管理的里程碑之作AutoStore，AutoStore是一款设计精巧而优雅的现代化响应式状态管理库，提供了强大的状态管理能力，支持响应式、计算属性、异步计算、表单双向绑定、信号组件等功能,为您提供一站式状态管理。

Github

主要特性

• 响应式核心：基于Proxy实现，数据变化自动触发视图更新。
• 就地计算属性：独有的就地计算特性，可以在状态树中任意位置声明computed属性，计算结果原地写入。
• 依赖自动追踪：自动追踪computed属性的依赖，只有依赖变化时才会重新计算。
• 异步计算：强大的异步计算控制能力，支持超时、重试、取消、倒计时、进度等高级功能。
• 状态变更监听：能监听get/set/delete/insert/update等状态对象和数组的操作监听。
• 信号组件：支持signal信号机制，可以实现细粒度的组件更新。
• 调试与诊断：支持chrome的Redux DevTools Extension调试工具，方便调试状态变化。
• 嵌套状态：支持任意深度的嵌套状态，无需担心状态管理的复杂性。
• 表单绑定：强大而简洁的双向表单绑定，数据收集简单快速。
• 循环依赖：能帮助检测循环依赖减少故障。
• Typescript: 完全支持Typescript，提供完整的类型推断和提示
• 单元测试：提供完整的单元测试覆盖率，保

安装

npm install @autostorejs/react
yarn add @autostorejs/react
pnpm add @autostorejs/react

快速了解

• 响应式

import { createStore } from '@autostorejs/react';

const { $, state,useReactive } = createStore({
  user: {
    firstName: 'zhang',
    lastName: 'fisher',
    fullName: (scope)=> { 
      return scope.firstName + scope.lastName;
    }
  }
});

// use in component
const Card = () => {
    const [ firstName,setFirstName ] = useReactive('user.firstName');
    const [ lastName,setLastName ] = useReactive('user.lastName');
    return <div>
      <div>FirstName:{firstName}</div>
      <div>LastName:{lastName}</div>
    </div>
}

• 信号组件

import { createStore } from '@autostorejs/react';

const { $, state } = createStore({
  user: {
    firstName: 'zhang',
    lastName: 'fisher',
    fullName: (scope)=> { 
      return scope.firstName + scope.lastName;
    }
  }
});

// signal component, only update when user.firstName or user.lastName change
const Card = () => { 
    return <div>$('user.fullName')</div>
}

• 原地异步计算

import { createStore,computed } from '@autostorejs/react';

const { $, state } = createStore({
  user: {
    firstName: 'zhang',
    lastName: 'fisher',
    fullName: computed(async (scope)=> { 
      return scope.firstName + scope.lastName;
    },["./firstName","./lastName"])
  }
});

// signal component, only update when user.firstName or user.lastName change
const Card = () => { 
    return <div>$('user.fullName')</div>
}

async computed with loading,timeout, retry, cancel, countdown, progress.

• 表单双向绑定

Form two-way binding is very simple.

import { createStore,computed } from '@autostorejs/react';
 
// simple two-way form binding
const Card = () => { 
    const { Form } = useForm({
      user: {
        firstName: 'zhang',
        lastName: 'fisher',
      }
    })
    return <Form>
      <input data-field-name="user.firstName" />
      <input data-field-name="user.lastName" />
    </Form>
}

Github