east-store v1.4.0

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)

useStore(selector?, compareFn?)