A tiny state manager for reactive apps.
JavaScript
Switch branches/tags
Nothing to show
Latest commit 8388659 Dec 13, 2017 @andruschka andruschka 1.2.0
Permalink
Failed to load latest commit information.
.babelrc initial Dec 6, 2017
.gitignore initial Dec 6, 2017
README.md modified readme Dec 6, 2017
main.js switched to tiny-emitter Dec 13, 2017
nanostore.js switched to tiny-emitter Dec 13, 2017
package-lock.json 1.2.0 Dec 13, 2017
package.json 1.2.0 Dec 13, 2017

README.md

nanostore 👛

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>
  `
}