Giter Club home page Giter Club logo

staterize's Introduction

Build Status Coverage Status styled with prettier

staterize

A tiny state machine to handle "derived state" in a set-and-forget fashion, designed for React.

Install

npm install staterize --save

Usage

Example with React:

const state = {
  count: 0
};

const deriveState = [
  {
    isBinary: st => st.count === 0 || st.count === 1
  }
];

class App extends React.Component {

  constructor() {
    // init a store
    this.store = staterize(state, deriveState, st => {
      // callback when store state changes
      this.setState(st);
    });
    this.state = this.store(); // get current state
  }

  incr() {
    // now use store to make state changes
    this.store({
      count: this.state.count + 1
      // no need to update isBinary!
    });
   }
 
  render() {
    const { count, isBinary } = this.state;
    return (
      <div>
        {count}
        isBinary: {isBinary ? 'yes' : 'no'}
        <button onClick={this.incr}>+1</button>
      </div>
    );
  }
  }
}

Stand-alone example:

import staterize from 'staterize';

  // prepare your state and its derivations:
  
  const state = { 
    count: 0 
   };
 
  const deriveState = [
    {
      is10: st => st.count === 10
    }
  ];
 
  // what to do when the state is updated:
  
  const onStateChange = st => {
    console.log(st)
  }
  
 // initilize a store from staterize:
 const store = staterize(state, deriveState, onStateChange);

// calling store with no params returns the current state:
 const state = store();
 // { count: 0, is10: false)
 
 // calling store with some state updates:
 store({ count: 10 })
 // triggers the onStateChange callback with the derived state:
 { count: 10, is10: true)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.