unistore微型集中式状态容器
unistore 是一个微型(650B)的集中式状态容器。
特性
非常小却很好地遵循了 Preact 的步伐
类似 Redux 的熟悉的命名和思路
有用的数据选择器,可从状态中提取属性
便携式的操作,可移动到一个通用的地方并导入
简化是唯一目标
Usage
import { Provider, createStore, connect } from 'unistore' let store = createStore({ count: 0 }) // If actions is a function, it gets passed the store: let actions = store => ({ // Actions can just return a state update: increment(state) { return { count: state.count+1 } }, // The above example as an Arrow Function: increment2: ({ count }) => ({ count: count+1 }), // Async actions can be pure async/promise functions: async getStuff(state) { let res = await fetch('/foo.json') return { stuff: await res.json() } }, // ... or just actions that call store.setState() later: incrementAsync(state) { setTimeout( () => { store.setState({ count: state.count+1 }) }, 100) } }) const App = connect('count', actions)( ({ count, increment }) => ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> </div> ) ) export default () => ( <Provider store={store}> <App /> </Provider> )
评论