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.
1
// initialize a NumUnit.
2
const counterUnit = new NumUnit() // with default value 0
3
​
4
// define two pure functions that produce a new value
5
const increment = value => value + 1;
6
const decrement = value => value - 1;
7
​
8
// create a react component
9
function App() {
10
  const [value, setValue] = useState<number>(); // create local state
11
​
12
  // use an effect to update the local state when counterUnit's value changes
13
  useEffect(() => {
14
    const subscription = counterUnit.subscribe(setValue);
15
    return () => subscription.unsubscribe(); // prevent memory leak
16
  }, []);
17
​
18
  return (
19
    <React.Fragment>
20
      Counter Value: {value}
21
​
22
      <button onClick={() => counterUnit.dispatch(increment)}>Increase</button>
23
      <button onClick={() => counterUnit.dispatch(decrement)}>Decrease</button>
24
    </React.Fragment>
25
  );
26
}
Copied!
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.
1
// initialize a NumUnit.
2
const counterUnit = new NumUnit() // with default value 0
3
​
4
// define two pure functions that produce a new value
5
const increment = value => value + 1
6
const decrement = value => value - 1
7
​
8
// create a react component
9
function App() {
10
  const {value, dispatch, resetValue} = useUnit(counterUnit)
11
​
12
  return (
13
    <React.Fragment>
14
      Counter Value: {value}
15
​
16
      <button onClick={() => dispatch(increment)}>Increase</button>
17
      <button onClick={() => dispatch(decrement)}>Decrease</button>
18
      <button onClick={() => resetValue()}>Reset</button>
19
    </React.Fragment>
20
  )
21
}
Copied!
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.
1
// initialize a NumUnit.
2
const counterUnit = new NumUnit() // with default value 0
3
​
4
// define two pure functions that produce a new value
5
const increment = value => value + 1;
6
const decrement = value => value - 1;
7
​
8
// create a react component
9
function App() {
10
  const value = useObservable(counterUnit);
11
​
12
  return (
13
    <React.Fragment>
14
      <p>
15
        Counter Value: <b>{value}</b>
16
      </p>
17
​
18
      <button onClick={() => counterUnit.dispatch(increment)}>Increase</button>
19
      <button onClick={() => counterUnit.dispatch(decrement)}>Decrease</button>
20
      <button onClick={() => counterUnit.resetValue()}>Reset</button>
21
    </React.Fragment>
22
  );
23
}
Copied!
Try it out on StackBlitz.

Integrations - Previous

Angular

useObservable Hook

Last modified 1yr ago

Copy link

Contents

Examples:

1. Counter using Hooks

2. Counter using useUnit Hook

3. Counter using useObservable Hook