# rbox

> 数据管理器

Latest version **1.0.1** (published 2022-02-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install rbox
pnpm add rbox
yarn add rbox
bun add rbox
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-02-15 |
| First published | 2022-02-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 36.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | yujingwyh@163.com |
| Maintainers | yujingwyh |

## Links

- npm: https://www.npmjs.com/package/rbox
- Repository: https://github.com/rboxjs/rbox
- Homepage: https://github.com/rboxjs/rbox#readme
- Issues: https://github.com/rboxjs/rbox/issues
- npm.io page: https://npm.io/package/rbox

## Recent versions

- 1.0.1 (latest) — 2022-02-15
- 1.0.0 — 2022-02-14

## README

# rbox

[![npm version](https://img.shields.io/npm/v/rbox.svg?style=flat-square)](https://www.npmjs.com/package/rbox)
![https://github.com/rboxjs/rbox/actions?query=test](https://github.com/rboxjs/rbox/workflows/test/badge.svg)

> 轻量的数据管理器

* 小而简，专注于数据管理
* 高效，没有拐弯抹角的东西
* 完美支持typescript

### 文档 
详细的文档请点击 [这里](https://rbox.yujing.link)

### 快速开始
1. 安装依赖

`npm install rbox --save` <br />
`npm install rbox-react --save` <br />

2. 定义数据
```typescript
import {createStore} from 'rbox'

const mArticles = ()=>{
    return createStore({
        loading:false,
        list:[],
        actions:{
            setLoading(status){
              this.core.updateData({
                  loading:status
              })  
            },
            async getPageData(){
                this.actions.setLoading(true)
                try{
                    const data = await fetch('/api/articles');
                    
                    this.core.updateData({
                        list:data
                    })
                }
                finally {
                    this.actions.setLoading(false)
                }
            }
        }
    })
}
```

3. 在react中使用

```typescript jsx
import React,{useEffect} from 'react'
import {useStores} from 'rbox-react'

const ArticlesComponent = ()=>{
    const [sArticles] = useStores([mArticles()])

    useEffect(()=>{
        sArticles.actions.getPageData();
    },[])
    
    if(sArticles.loading){
        return <div>loading...</div>
    }
    
    return sArticles.list.map(item=>{
        return <div>
            <h3>{item.title}</h3>
            <div>{item.content}</div>
        </div>
    })
}
```

### License

[MIT](LICENSE.md)

---
_Source: https://npm.io/package/rbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._