reactivez

Universal reactive storage for data. Inspired by VueJS

Getting started

You can reactive storage in any appliation: React, Node.JS, etc.

Example:

import ReactDOM from "react-dom";
import React, { Component } from "react";
 
import ReactiveStorage from "reactivez";
 
let reactiveStorage = new ReactiveStorage({
  messages: []
});
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { messages: [] };
  }
  componentWillMount() {
    this.handle = reactiveStorage.subscribe("messages", messages =>
      this.setState({ messages })
    );
  }
  componentWillUnmount() {
    reactiveStorage.deleteSubscribe(this.handle); // Delete subscribe in order to prevent memory leak
  }
  render() {
    return (
      <div>
        {this.state.messages.map(message => (
          <p>{message}</p>
        ))}
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

Now you can set reactiveStorage.data.messages and state of App component will be updated.

Reference

new ReactiveStorage(data)

Create new reactive storage with specific initial state.

ReactiveStorage.subscribe(field, callback)

Subscribe on updates of ReactiveStorage.data[field]. If it's setter is called, callback is called with new value passed to it. Returns handle of subscribe.

ReactiveStorage.deleteSubscribe(handle)

Delete subscribe with specific handle. Used to prevent memory leaks. Handle is value returned on subscribe call.