https://github.com/postor/react-tiny-states

tiny states management for react
https://github.com/postor/react-tiny-states

Last synced: 2 months ago
JSON representation

tiny states management for react

• Host: GitHub
• URL: https://github.com/postor/react-tiny-states
• Owner: postor
• Created: 2021-05-14T13:01:49.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-06-19T09:03:00.000Z (almost 4 years ago)
• Last Synced: 2025-02-25T20:07:33.736Z (3 months ago)
• Language: TypeScript
• Size: 319 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-tiny-states

用来给 React 管理小状态的库 | tiny states management for react 

## 对比其他状态管理库 | compare with other

|              | redux       | recoil  | pure-store | react-tiny-states |

| ------------ | ----------- | ------- | ---------- | ----------------- |

| single/multi | single      | multi   | multi      | multi             |

| base on      | context     | context | state      | state             |

| async        | third party | √       | ×          | √                 |

## 基本使用 | basic usage

```

import Store from "react-tiny-states"

// 简单变量 | basic init 

const selectedIndex = new Store(0)

// 异步变量 | async init

const list = new Store([], [], () => getList().then((list=[])=>list)

const Index=()=>{

  let [arr,pending]=list.use()

  if(pending) return 'loading...'

  return 
{arr.map((x,i)=>
{x}
)}

}


// 计算值 | computed init

const selected = new Store('',[selectedIndex,list],selectedIndex=>list[Math.min(selectedIndex,list.length-1)])

// 异步计算值 | computed async init

const desc = new Store(

  'default desc'

  , [selected]

  , (selected) => () => getDesc(selected).then(desc=>desc)

)

// 更新 | update

let val = new Store(0)

const Test = () => {

  let [i, pending, setI] = val.use()

  return <>

    
value:{i + ''},pending:{pending + ''}

     setI(0) // 更新 | basic update

    }>reset

     setI(x => x + 1) // reducer 更新 | reducer update

    }>+1

     setI(() => new Promise(resolve => {

      setTimeout(() => resolve(y => y + 1), 1000)

    }) as Promise<(v: number) => number>)}>+1 delay 1s

  >

}

```


## ssr

refer [examples/ssr](./examples/ssr)