A tiny ~700b centralized state container with component bindings for Preact. #reactjs #preact

  • { , , } store ({ count }) If actions is a function, it gets passed the store: ({ ( ) { { count . } }
  • , The above example as an Arrow Function: ({ count }) ({ count count }), ( ) { res ( ) { stuff .
  • , ) } }) ( , actions)( ({ count, increment }) ( div p Count {count} p button onClick {increment} Increment button div ) ) () ( Provider store {store} App Provider ) – – Creates a new store, which is a tiny evented state container.
  • Register a listener function to be called whenever state is changed.
  • If don’t, just open a new clear and descriptive issue.

unistore – 🌶 700b state container with component actions for Preact

Help save net neutrality! A free, open internet is once again at stake—and we need your help.

GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.

This project uses node and npm. Go check them out if you don’t have them locally installed.

Then with a module bundler like webpack or rollup, use as you would anything else:

// using ES6 modules import { createStore, Provider, connect } from ‘unistore’ // using CommonJS modules const unistore = require(‘unistore’)

The UMD build is also available on unpkg:

import { Provider, createStore, connect } from ‘unistore’ let store = createStore({ count: 0 }) // If actions is a function, it gets passed the store: let actions = store => ({ // Actions can just return a state update: increment(state) { return { count: state.count + 1 } }, // The above example as an Arrow Function: increment2 : ({ count }) => ({ count: count+ 1 }), // Async actions can be pure async/promise functions: async getStuff(state) { let res = await fetch(‘/foo.json’) return { stuff: await res.json() } }, // … or just actions that call store.setState() later: incrementAsync(state) { setTimeout( () => { store.setState({ count: state.count + 1 }) }, 100) } }) const App = connect(‘count’, actions)( ({ count, increment }) => (

Count: {count}< /p>

GitHub