AutoStore

Document

Very easy and elegant state management library. It is based on proxy and provides functions such as signaling, computation, and watching to ensure fine-grained updates

Features

Reactive: Implemented based on Proxy, automatically triggers view updates when data changes.
In-place Computed: Unique in-place computation feature allows declaring computed properties anywhere in the state tree, with results written in place.
Automatic Dependency Tracking: Automatically tracks dependencies of computed properties, only recalculates when dependencies change.
Asynchronous Computation: Powerful asynchronous computation control, supports advanced features like timeout, retry, cancel, countdown, progress.
State watch: Can listen to operations on state objects and arrays such as get/set/delete/insert/update.
Signal Components: Supports signal mechanism, enabling fine-grained component updates.
DevTools: Supports Redux DevTools Extension for chrome, making it easy to debug state changes.
Nested State: Supports arbitrarily deep nested states, eliminating concerns about the complexity of state management.
Form Binding: Powerful and simple two-way form binding, making data collection easy and fast.
Circular Dependency: Helps detect circular dependencies to reduce faults.
TypeScript: Fully supports TypeScript, providing complete type inference and hints.
Unit Testing: Provides comprehensive unit test coverage to ensure code quality.

Install

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

Get-started

Basic usage

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>
}

Signal Component

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>
}

InPlace async computed

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

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>
}

License

MIT

Provide feedback

Saved searches

Use saved searches to filter your results more quickly