east-store
east-store is a state manager with easiest api that based hooks and immer.
install
npm install east-store
features
- easy usage, just one api
createStore - immutale data based immer
- friendly typescript support, no need more type declarations
- use react-hooks, why not?
usage
import { createStore } from 'east-store'
const AtomicStore = createStore(0, {
increase: () => count => count + 1,
decrease: n => count => count - n
})
const Counter: React.FC = () => {
const [count, action] = AtomicStore.useStore()
const handleDecrease = () => {
action.decrease(3)
}
return (
<div>
<span>{count}</span>
<button id="increase-btn" onClick={action.increase}>
increase
</button>
<button id="decrease-btn" onClick={handleDecrease}>
decrease
</button>
</div>
)
}Of course, you can use object as initial state
const amy = {
name: 'Amy',
total: 130,
score: { math: 60, english: 70 }
}
const buildStudentStore = (student: typeof amy) =>
createStore(student, {
modify: (subject: 'math' | 'english', score: number) => student => {
student.score[subject] = score
student.total = student.score.math + student.score.english
}
})
const amyScore = buildStudentStore(amy)
const [state, actions] = amyScore.useStore()So, async operation is also supported
async function fetchCount(): number {
return await fetch('/path')
}
const AtomicStore = createStore(0, {
increase: () => count => count + 1,
getRemote: () => async (_) => {
return await fetchCount()
}
})Api
createStore(initial, actions, options)| des | type | |
|---|---|---|
| initial | initial state | primitive type object Map, Set |
| actions | actions for state | `(payload) => (state) => void |
| options | other options | persist: boolean or Storage, default falseset true if you want this state been persisted and set custom storage implementation with set, get is also valid * persistence means shared |
useStore(selector?, compareFn?)| des | type | |
|---|---|---|
| selector | selector function | (state) => state.items |
| compareFn | compare function,default shallow | (prev, curr) => boolean |