east-store

east-store is a state manager with easiest api that based hooks and immer.

Usage no npm install needed!

<script type="module">
  import eastStore from 'https://cdn.skypack.dev/east-store';
</script>

README

east-store

east-store is a state manager with easiest api that based hooks and immer.

npm MIT License

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