# jstates

**Repository Path**: ArkTSCentralRepository/jstates

## Basic Information

- **Project Name**: jstates
- **Description**: jstates 是一个简单、快速的 JavaScript 状态管理库，基于观察者模式实现，用于在组件或服务间传递状态。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-21
- **Last Updated**: 2024-11-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# jstates
基于[jstates](https://www.npmjs.com/package/jstates)原库1.0.0版本进行适配, 所有功能代码已经转换为`ArkTS`文件

## Install
```sh
ohpm install jstates
```

# JStates

A super small, simple and fast ⚡ JavaScript state library
A simple Observer (publisher - subscriber) pattern implementaion

## Why another state library

Many developers need a state to communicate between their services/components.
I wanted to introduce a very small, simple state solution that would work for most cases.

In order to understand, compose or improve this library,
you don't need more than to jump into the small source code and extend the functionality or create your own.

## Usage

### Counter

```typescript
import { StateManager, createState, ANY } from 'jstates';

let myState = createState({ "counter": 1 })

function onUpdate(state: Record<string, ANY>) {
    console.log("onUpdate: counter changed to ", state["counter"]);
}

myState.subscribe(onUpdate);

// Updating with an object
myState.setState({ "counter": 10 });
// onUpdate: counter changed to  10

// Updating with a function
myState.setState((state) => ({ "counter": ++(state["counter"] as number) }));
// onUpdate: counter changed to  11
```

### Todos

```typescript
import { StateManager, createState, ANY } from 'jstates';

const todosState = createState({
  "todos": new Array<string>(),
});

function onUpdate(state: Record<string, ANY>) {
  console.log("onUpdate: todos changed to ", state.todos);
}

todosState.subscribe(onUpdate);

const addTodo = (todo: string) => {
  todosState.setState((s: Record<string, ANY>) => {
    return {
      "todos": [...s["todos"] as Array<string>, todo],
    };
  });
};

addTodo("Buy milk");
// onUpdate: todos changed to  [ 'Buy milk' ]
addTodo("Buy eggs");
// onUpdate: todos changed to  [ 'Buy milk', 'Buy eggs' ]
```