React

Using ActiveJS with React is pretty straightforward since ActiveJS has the same basic API as every other subscription-based State Management solution. If you're following the general guidelines, then you are already on the right path.

Apart from the following examples, you will find more examples in the Examples section.

Examples:

1. Counter using Hooks

Here's an example of implementing a simple counter with ActiveJS NumUnit and React Hooks.

// initialize a NumUnit.
const counterUnit = new NumUnit() // with default value 0

// define two pure functions that produce a new value
const increment = value => value + 1;
const decrement = value => value - 1;

// create a react component
function App() {
  const [value, setValue] = useState<number>(); // create local state

  // use an effect to update the local state when counterUnit's value changes
  useEffect(() => {
    const subscription = counterUnit.subscribe(setValue);
    return () => subscription.unsubscribe(); // prevent memory leak
  }, []);

  return (
    <React.Fragment>
      Counter Value: {value}

      <button onClick={() => counterUnit.dispatch(increment)}>Increase</button>
      <button onClick={() => counterUnit.dispatch(decrement)}>Decrease</button>
    </React.Fragment>
  );
}

Try it out on StackBlitz.

2. Counter using useUnit Hook

Here's the same counter example using the useUnit Hook. This is much better than replicating the same useState and useEffect logic every time you want to use a Unit.

// initialize a NumUnit.
const counterUnit = new NumUnit() // with default value 0

// define two pure functions that produce a new value
const increment = value => value + 1
const decrement = value => value - 1

// create a react component
function App() {
  const {value, dispatch, resetValue} = useUnit(counterUnit)

  return (
    <React.Fragment>
      Counter Value: {value}

      <button onClick={() => dispatch(increment)}>Increase</button>
      <button onClick={() => dispatch(decrement)}>Decrease</button>
      <button onClick={() => resetValue()}>Reset</button>
    </React.Fragment>
  )
}

Try it out on StackBlitz.

3. Counter using useObservable Hook

Here's the same counter example again, using the useObservable Hook. This is even better than useUnit, since we don't have to re-map the Unit's API again in a Hook, we just need the dynamic value to trigger rendering update, and for dispatch and other methods, we can use the Unit directly.

// initialize a NumUnit.
const counterUnit = new NumUnit() // with default value 0

// define two pure functions that produce a new value
const increment = value => value + 1;
const decrement = value => value - 1;

// create a react component
function App() {
  const value = useObservable(counterUnit);

  return (
    <React.Fragment>
      <p>
        Counter Value: <b>{value}</b>
      </p>

      <button onClick={() => counterUnit.dispatch(increment)}>Increase</button>
      <button onClick={() => counterUnit.dispatch(decrement)}>Decrease</button>
      <button onClick={() => counterUnit.resetValue()}>Reset</button>
    </React.Fragment>
  );
}

Try it out on StackBlitz.