React 状态管理库 statty
- 授权协议: MIT
- 开发语言: JavaScript
- 操作系统: 跨平台
- 软件首页: https://github.com/vesparny/statty
- 软件文档: https://github.com/vesparny/statty
- 官方下载: https://github.com/vesparny/statty
软件介绍
statty 是一个小巧而又不引人注目的，用于 React 和 Preact 应用程序的状态管理库。
使用方法：
// https://codesandbox.io/s/rzpxx0w34
import React from 'react'
import { render } from 'react-dom'
import { Provider, State } from 'statty'
import inspect from 'statty/inspect'
// selector is a function that returns a slice of the state
// if not specified it defaults to f => f
const selector = state => ({ count: state.count })
// updaters
// updaters MUST be pure and return a complete new state,
// like Redux reducers
const onDecrement = state =>
Object.assign({}, state, { count: state.count - 1 })
const onIncrement = state =>
Object.assign({}, state, { count: state.count + 1 })
// Counter uses a <State> component to access the state
// and the update function used to execute state mutations
const Counter = () => (
<State
select={selector}
render={({ count }, update) => (
<div>
<span>Clicked: {count} times </span>
<button onClick={() => update(onIncrement)}>+</button>{' '}
<button onClick={() => update(onDecrement)}>-</button>{' '}
</div>
)}
/>
)
// initial state
const initialState = {
count: 0
}
// The <Provider> component is supposed to be placed at the top
// of your application. It accepts the initial state and an inspect function
// useful to log state mutatations during development
// (check your dev tools to see it in action)
const App = () => (
<Provider state={initialState} inspect={inspect}>
<Counter />
</Provider>
)
render(<App />, document.getElementById('root'))
