With MVC, basically we are concentrating the control’s callbacks to the controller object instead of just letting each control’s callback interact with the data store (model) and view in an unstructured way.<\/p>\n\n\n\n
\n\n\n\n
When learning Flutter, I was exposed to the Redux pattern (which came from React). Because the tutorials was designed around the language features of Dart, the documentation kind of obscured the essence of the idea (why do we want to do this) as it dwelt on the framework (structure can be refactored into a package). The docs talked a lot about boundaries but wasn’t clearly why they have to be meticulously observed, which I’ll get to later.<\/p>\n\n\n\n
The core inspiration in Redux\/BLoC is taking advantage of the concept of ‘listening to a data object for changes’ (instead of UI controls\/widget events)!<\/p>\n\n\n\n
Instead of having the UI control’s callback directly change other UI control’s state (e.g. for display), we design a state vector\/dictionary\/struct\/class that holds contents (state variables) that we care. It doesn’t have to map 1-1 to input events or 1-1 to output display controls.<\/p>\n\n\n\n
When an user interaction (input) event emitted a callback, the control’s callback do whatever it needs to produce the value(s) for the relevant state variable(s) and change the state vector. The changed state vector will trigger the listener that scans for what needs to be updated to reflect the new state and change the states of the appropriate view UI controls.<\/p>\n\n\n\n
This way the input UI controls’ callbacks do not have to micromanage what output UI controls to update, so it can focus on the business logic that generates the content pool that will be picked up by the view UI controls to display the results. In Redux, you are free to design your state variables to match more closely to the input data from UI controls or output\/view controls’ state. I personally prefer a state vector design that is closer to the output view than input controls.<\/p>\n\n\n\n
\n\n\n\n
The intuition above is not the complete\/exact Redux, especially with Dart\/Flutter\/React. We also have to to keep the state in ONE place and make the order of state changes (thus behavior) predictable!<\/p>\n\n\n\n
- Actions and reducers are separate. Every input control fires a event (action signal) and we’ll wait until the reducers (registered to the actions) to pick it up during dispatch() instead of jumping on it. This way there’s only ONE place that can change states. Leave all the side effects in the control callback where you generate the action. No side effects (like changing other controls) allowed in reducers!<\/li>
- Reducers do not update the state in place (it’s read only). Always generate a new state vector to replace the old one (for performance, we’ll replace the state vector if we verified the contents actually changed). This will make timing predictable (you are stepping through state changes one by one)<\/li><\/ul>\n\n\n\n
In Javascript, there isn’t really a listener actively listening state variable changes. Dispatch (which will be called every time the user interacts using control) just runs through all the listeners registered at the very end after it has dispatched all the reducers. In MATLAB, you can optionally set the state vector to be Observable and attach the change listener callback instead of explicitly calling it within dispatch.<\/p>\n\n\n\n
![\"\"](\"https:\/\/wonghoi.humgar.com\/blog\/wp-content\/uploads\/2021\/11\/image.png\")
https:\/\/gist.github.com\/gaearon\/ffd88b0e4f00b22c3159<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
![\"\"](\"https:\/\/wonghoi.humgar.com\/blog\/wp-content\/uploads\/2021\/11\/image-3.png\")
<\/figure><\/div>\n