nanostore
v1.2.1
Published
A tiny state manager for reactive apps.
Downloads
444
Maintainers
Readme
nanostore 👛
⚠️ Deprecated: this module is no longer beeing maintained. There are a few better options on the market as: MobX, Zustand...
A tiny state manager for reactive apps.
E.g. use with react, preact, yo-yo ...
- Small in size
- Works with ie 10 and up
- Fast and simple
Install
npm i nanostore
Usage
const Nanostore = require('nanostore')
// create new nanostore with initial state
const myStore = new Nanostore({ foo: false })
// subscribe to store changes
myStore.subscribe(newState => {
console.log('Wow the state changed...')
console.log(newState)
})
// modify the state (works like Reacts setState() ...)
myStore.set({ foo: 'bar' })
// get state
myStore.get()
// create custom events
myStore.on('fetchSomeApi', (endpoint) => {
fetch('https://some-cool.api/v2/' + endpoint)
.then(res => res.json)
.then(data => myStore.set({ apiData: data }))
})
// call custom events
myStore.emit('fetchSomeApi', 'products')
// actually thats it!
API
new Store
Creates a new Store object.
Parameters
- [initialData: Object]
Store.prototype.set
Sets the state (like in Reacts setState ...)
The set Function modifies current state like this: state = { ...state, ...newState}
(Existing props will be overwritten or kept)
Parameters
- stateModifier: Object
Store.prototype.get
Return current state object
Store.prototype.subscribe
Creates a Subscription that will be rerun on every state change.
Parameters
- fn: Function
Store.prototype.on
Creates custom events.
Comes in handy if you want to create state actions (like fetching something from an API etc...)
Parameters
- eventName: String
- fn: Function
Store.prototype.emit
Calls an custom event.
Normally you would pass that down to your UI Components, so they can call custom events...
Parameters
- eventName: String
- [data: Any]
How to use with a UI library (yo-yo in this case)
// main.js
const Nanostore = require('nanostore')
const yo = require('yo-yo')
const App = require('./components/App');
const store = new Nanostore({ count: 0 })
let app = App(store.get(), store.emit)
store.subscribe(state => {
yo.update(app, App(state, store.emit)) // rerenders app on state change (yo-yos diffing algoryth will do the work)
})
store.on('increment', num => {
const oldCount = store.get().count
const newCount = oldCount + num
store.set({ count: newCount })
})
document.body.appendChild(app)
// components/app.js
const yo = require('yo-yo')
module.exports = function App(state, emit) {
const handleClick = evt => {
emit('increment', 1)
}
return yo`
<div>
<h1>The current count is: ${ state.count }</h1>
<button onclick=${handleClick}>increment</button>
</div>
`
}