How to Update Table State with MobX (Part 2)
In Part 2 of this series on State Management with MobX, we'll continue building a cryptocurrency exchange calculator to explore why state management can be the better option for handling change events in your Wix Table element.
***************************************
Additional Wix for Developers Resources
Get Started Coding on Wix Playlist (6 Videos) ► • Start Coding with Velo
***************************************
Description
State management enables you to re-render components on the page without having to add listeners for each UI element. We'll explore the different between a jQuery style implementation of handling data changes in a data versus handling the same data changes with MobX. Learn more about getting and setting table data with state management.
MobX ► https://mobx.js.org/README.html
Wix Table Element ► https://www.wix.com/velo/reference/$w...
State Management with Javascript ► https://css-tricks.com/build-a-state-...
API Documentation ► https://www.wix.com/velo/reference/ap...
Timestamps:
00:17 🔄 State management tools like MobX automate view updates when data changes, preventing repetitive code for manual visual updates.
01:42 📊 Implementing a Wix table element to display pre-set values
02:11 🔄 MobX concepts - autorun triggers functions on state changes, observable saves states for site-wide usage.
03:13 ❌ Manual state handling without MobX involves repetitive code updates for both the frontend and variable states.
05:04 🔄 dataFetcher in table elements allows dynamic data updates, enabling API calls for refreshing row data.
06:54 🔄 Utilizing another approach to implement the Wix table using direct row setting instead of dataFetcher.
08:41 🔄 Simulating dynamic data by creating a backend function to set value randomly upon refresh.
11:36 🔄 Creating a new MobX function updateRate to change the state value of rates.
12:31 📊 Generating a structured data array getTableData to derive row values for the Wix table from saved states.
15:37 🔄 Utilizing MobX's autorun to dynamically update the Wix table's rows with data derived from the structured array.
17:29 🔄 Comparison of state management methods: MobX offers advantages over jQuery-style coding for cleaner and more efficient code.
#wix #wixstudio #javascript #webdevelopment #coding
Be sure to subscribe for more developer tips and tutorials. / @wixfordevelopers
STAY TUNED:
Discord ► / discord
Twitter ► / devsonwix
YouTube ► / @wixfordevelopers