Legend-State

Legend State是一个超级快速和强大的状态库，支持fine-g...

State managementReact
LegendApp/legend-statelegendapp.com/open-source/state/@legendapp/state

README

Legend-State


Legend State是JavaScript应用程序的超级快速和强大的状态管理器，有两个主要目标：

1. 🦄 尽可能容易使用


没有样板，也没有动作、减速器、选择器、分派器、传奇、恶棍或史诗。可观察对象只是正常的对象，您可以倾听它们的变化。

  1. ```jsx
  2. // Create an observable object
  3. const state = observable({ settings: { theme: 'dark' } })

  5. // Just get and set
  6. state.settings.theme.get() === 'dark'
  7. state.settings.theme.set('light')

  9. // observe re-runs when accessed observables change
  10. observe(() => {
  11.     console.log(state.settings.theme.get())
  12. })

  14. // Observer components automatically track observables and re-render when they change
  15. const Component = observer(function Component() => {
  16.     const theme = state.settings.theme.get()

  18.     return <div>Theme: {theme}</div>
  19. })
  20. ```

2. ⚡️ 最快的React状态库


Legend State在几乎每一个指标上都胜过其他任何一个状态库，并且对数组进行了如此优化，甚至在交换基准测试上胜过了普通JS。只有3kb，并且样板代码大大减少，文件大小也会大大节省。


有关详细信息，请参阅文档 for more details。

安装


npm install @legendapp/state or yarn add @legendapp/state

实例


  1. ```jsx
  2. import { observable } from "@legendapp/state"
  3. import { observer } from "@legendapp/state/react";
  4. import { persistObservable } from "@legendapp/state/persist";

  6. // Create an observable object
  7. const state = observable({ settings: { theme: 'dark' } })

  9. // get() returns the raw data
  10. state.settings.theme.get() === 'dark'

  12. // observe re-runs when any observables change
  13. observe(() => {
  14.     console.log(state.settings.theme.get())
  15. })

  17. // Assign to state with set
  18. state.settings.theme.set('light')

  20. // Automatically persist state. Refresh this page to try it.
  21. persistObservable(state, { local: 'exampleState' })

  23. // Components re-render only when accessed observables change
  24. const Component = observer(function Component() {
  25.     const theme = state.settings.theme.get()
  26.     // state.settings.theme is automatically tracked for changes

  28.     const toggle = () => {
  29.         state.settings.theme.set(theme =>
  30.             theme === 'dark' ? 'light' : 'dark'
  31.         )
  32.     }

  34.     return (
  35.         <div
  36.             className={theme === 'dark' ? 'theme-dark' : 'theme-light'}
  37.         >
  38.             <div>Theme: {theme}</div>
  39.             <Button onClick={toggle}>
  40.                 Toggle theme
  41.             </Button>
  42.         </div>
  43.     )
  44. })
  45. ```

集锦


- ✨ Super easy to use - observables are normal objects
- ✨ No boilerplate
- ✨ Safe from 🔫 footguns
- ✨ Designed for maximum performance and scalability
- ✨ React components re-render only on changes
- ✨ Very strongly typed with TypeScript
- ✨ Persistence plugins for automatically saving/loading from storage
- ✨ State can be global or within components

Read more about why Legend-State might be right for you.

文档


见 the documentation site.

社区


加入我们的Slack，加入Legend社区。

Road to 1.0


- [ ] Improve documentation
- [ ] An examples page
- [ ] Fix types for TypeScript strict mode

在进行中


- [ ] IndexedDB持久性插件
- [ ] Firebase实时数据库的远程持久性插件

👩‍⚖️ 许可证


MIT


Legend-State 由 Jay Meistrich with Legend and Bravely 创建并维护。

Legend      Bravely