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 | state |
| options | other options | persist: boolean or Storage, default false set 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 |