The picostate from estrattonbailey

picostate's Introduction

npm i picostate --save

Event-based immutable state management.

400 bytes
familiar event based interface
only fires listeners for changed values
emits state updates only when requested
integrates seamlessly with React

Usage

Create a store:

import createStore from "picostate";

const store = createStore({
  a: 0,
  b: false
});

Safely access state:

store.state; // { a: 0, b: false }

store.listen(state => console.log(state));

store.listen(["b"], state => console.log(state.b));

Update state:

const emit = store.hydrate({ a: 1 });

Fire registered listeners:

emit(); // { a: 1, b: false }

Update state and fire listeners:

store.hydrate({ b: true })(); // { a: 1, b: true }, true

Update state using the previous state:

store.hydrate(state => ({ a: state.a + 1 }))(); // { a: 2, b: true }

const removeListener = store.listen(state => console.log(state));
store.hydrate({ a: 1 })(); // { a: 1, b: true }
removeListener();
store.hydrate({ a: 2 })(); // no listener fired
store.state; // { a: 2, b: true }

Reset to initial state:

store.hydrate();
store.state; // { a: 0, b: false }

License

MIT License © Eric Bailey

picostate's People

Contributors

Stargazers

Watchers

picostate's Issues

setState() method that automatically emits

Promise I'm not going to bombard you with Issues and PRs 😆

One more pattern I've found myself using with picoapp + picostate is defining a setState function that automatically emits change notifications:

const store = createStore({
  isLoading: false,
  foo: true,
  bar: false
})

function setState(fn) {
  const dispatch = store.hydrate(fn)
  dispatch()
}

function onSubmit(event) {
  event.preventDefault()
  setState({isLoading: true})
  // ...
}

I've found that I almost always want to emit after hydrating state. This feels slightly more clear than store.hydrate(fn)() and is a nice familiar function name 😀

Interesting?

Recommend Projects