Comment on page
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.
// 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>
);
}
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>
)
}
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>
);
}
Last modified 3yr ago