iom

πŸ£πŸ”€πŸš€Tiny, simple, over-powered state management

View the Project on GitHub okaysoftware/iom

Usage with React

React contexts/store.js

// src/contexts/store.js

import Store from "iom";
import { createContext } from "react";

export const INITIAL_STATE = { on: false };
export const store = new Store(INITIAL_STATE);

export const { Provider, Consumer } = createContext(INITIAL_STATE);

React App.js

// src/App.js

import React, { Component } from "react";

import { store, INITIAL_STATE, Provider } from "./contexts/store";
import Switch from "./components/Switch.js";

class App extends Component {
  constructor() {
    super();
    this.state = INITIAL_STATE;
  }
  componentDidMount() {
    store.subscribe(state => this.setState(state));
  }
  render() {
    return (
      <Provider value={this.state}>
        <Switch />
      </Provider>
    );
  }
}

export default App;

React components/Switch.js

// src/components/Switch.js

import React, { Component, Fragment } from "react";

import { store, Consumer } from "../contexts/store";

class Switch extends Component {
  toggleOn() {
    store.update(state => ({ ...state, on: !state.on }));
  }
  render() {
    return (
      <Fragment>
        <Consumer>{({ on }) => (on ? "πŸ™‚" : "πŸ™ƒ")}</Consumer>
        <button onClick={this.toggleOn}>Toggle</button>
      </Fragment>
    );
  }
}

export default Switch;