Reactive
Edit page
IntroductionStoreConnectStoreProvideruseStoreobservedecorateMore

Connect your React apps to reactive store

StoreProvider

Make the store accessible to the rest of the app.

import React from "react";
import ReactDOM from "react-dom";
import { StoreProvider } from "@hadeeb/reactive";
import store from "./store";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
  <StoreProvider store={store}>
    <App />
  </StoreProvider>,
  rootElement
);

useStore

Read store from components

import React from "react";
import { useStore } from "@hadeeb/reactive";
function CounterDisplay() {
  const [state, dispatch] = useStore();
  return <span>{state.count}</span>;
}

observe

Wrap your function components to track usage of state and rerender when necessary

import React from "react";
import { useStore, observe } from "@hadeeb/reactive";
function CounterDisplay() {
  const [state, dispatch] = useStore();
  return <span>{state.count}</span>;
}
export default observe(CounterDisplay);

forwardRef & memo

Components wrapped with observe have React.memo applied by default. If the component to observe is also supposed to forward refs, don't apply forwardRef, pass forwardRef : true to observe.

observe take an optional second argument with the shape

{
  forwardRef?:boolean; // default = false
  memo?:boolean; // default = true
}
import React from "react";
import { useStore, observe } from "@hadeeb/reactive";
function Counter(props, ref) {
  const [, dispatch] = useStore();
  function onClick() {
    dispatch("INCREMENT");
  }
  return (
    <div>
      <span>{state.count}</span>
      <button ref={ref} onClick={onClick}>
        +
      </button>
    </div>
  );
}
export default observe(Counter, {
  forwardRef: true
});

decorate

Access store from class components

import React from "react";
import { decorate } from "@hadeeb/reactive";
class CounterDisplay extends React.Component {
  render() {
    const store = this.context;
    const state = store.getState();
    return return <span>{state.count}</span>;
  }
}
export default decorate(CounterDisplay);

  • decorate can also be used as a decorator

    @decorate
    class MyComponent extends React.Component {
      ...
    }

  • decorate stores tracking data in this.$.

    Avoid using $ as instance variable/method in decorated components

  • decorate uses contextType to inject store to this.context.

    You can't use contextType with decorate.