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
- Reactive: Implemented based on
Proxy, automatically triggers view updates when data changes. - In-place Computed: Unique in-place computation feature allows declaring
computedproperties anywhere in the state tree, with results written in place. - Automatic Dependency Tracking: Automatically tracks dependencies of
computedproperties, 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
signalmechanism, enabling fine-grained component updates. - DevTools: Supports
Redux DevTools Extensionforchrome, 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.
npm install @autostorejs/react
yarn add @autostorejs/react
pnpm add @autostorejs/react- 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>
}
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}