mobx
provides the tool to do that, and it is almost indistinguishable from magic.renderView
again to refresh:renderView
manually, we'd like it to be called automatically when we modify the object, like so:mobx
introduces two magic functions:autorun
, so it gets re-executed when obj
is changed:obj
in the provided console, and see the view changing.Note: In actual React code, we won't explicitly callautorun
, the framework handles it. But the idea is the same, modify an object, and the components that uses the object would automatically re-render.
solar.development.json
into the project:rpc
and myToken
instances are initialized with two global constants:Store
is an observable object. If the totalSupply
property changes, the React component that uses it would update.updateTotalSupply
to get the total supply. The simplified Store
code:this.totalSupply
, the view that uses it would get re-rendered. Specifically, this chunk of JSX:Mint
event so we can update the total supply immediately if somebody minted additional tokens. The simplified code:Mint
and Transfer
events, and does something when notified:Mint
: update the total supply.Transfer
: add the transfer event to an array, so we can display it in the UI.transferEvents
is straightforward:transferEvents
.Transfer
event should show up in the UI:mintTokens
method tracks the mint transactions that had been made, and updates the UI as the transactions progress through the various stages of their lifecycles.txRecord
. The second half updates the txRecord, which in turn triggers views to update.mintTokens
: