Or just a nice MobX tutorial Photo by on Karsten Würth (@inf1783) Unsplash Framework Wars …NOT 😜 I started my journey in the Frameworks fairyland with and series by Laracast. I had heard about React, but back then when I looked at JSX it seemed like an abomination to me! Mixing html tags with JS logic? Haven’t they heard about design patterns and separation of concerns? Why not just use JQuery to make some blinking text for goodness’ sake? Vue this amazing But then I learned JS, not _JQuery JS* (_making tricks with the DOM), but JS as a development language, an elegant expressive tool to manipulate data, a language with beautiful methods to work with Arrays, String, and Objects. And what you can’t do with vanilla JS very likely there’s a for that, or there’s an NPM package. ( Lol!) Lodash for sure npm install make-me-a-sandwich After all that I took another look at React and… I instantly fell in love! Where Vue is sort of like html with added functionality ( ) JSX is plain JS that happens to generate DOM. I’m not actually trying to start a frameworks war here. I currently have Vue and React apps on production and I have been able to find all the tools that I need on both frameworks to do my job. The choice really comes down to a personal preference or your company’s/team’s preference. v-if, v-for... But React… For a beginner in React it seemed like Redux is the default store as is Vuex for Vue thus I decided to learn Redux… and after watching the complete egghead series about 3 times and going over the documentation just as many times, I still felt like I had no clue what I was doing. Anything less than a trivial reducer was a headache to write. Normalized data, relational tables, immutability and DB technology, they all seemed like pre-requirements for Redux! I did learn a lot, but not enough to feel anywhere close to productive with it. Then there are wrappers for Redux and high order functions to generate other functions and reducer recipes… I felt like an intern again, not being able to finish my project because I didn’t know how to have a simple store and make my app to it! 😥 react I’m sure that there are a lot of developers out there smarter than I am that are very productive with with Redux. I look up to you, Sensei! I missed the days of Vuex in which everything just worked, mutable state was not a sin and no matter where I called a store action, the whole app was always in sync. But i liked React a lot too so I started to see if I could use Vuex on React, (apparently not) but in the search I came across . It sure had bold claims: MobX MobX makes state management simple again by addressing the root issue: it makes it impossible to produce an inconsistent state. * Again I headed to egghead to watch the video tutorials. They were nice but tough luck! does not support decorators and you don’t get a lot of examples of how to do things without them. Then there’s which claims to be opinionated (and that’s an understatement!) and then again, I had no clue how to do things or what was going on! The videos taught me how to make a pretty decent counter and felt like I was writing an enterprise banking application, but I couldn’t find a medium difficulty level. create-react-app mobx-state-tree mobx-state-tree I really liked React so I went back to Redux but couldn’t make it work so, again, I reluctantly gave MobX another try... “ And at last I see the light; And it’s like the fog has lifted” Shameless Disney plug! Want I want to do us show you that MobX is easier to use that what you might think. We are gonna use MobX to do more than just count up and down and is simpler than a implementation. mobx-state-tree The Store We are going to make a simple store, extracted from a project I’m currently . In it we are going to have a list of students and a list of courses, and we will be able to enroll and unenroll students from a course. working on The starting point is a clean app and here is : create-react-app store.js 🙄 Don’t let the length scare you, it’s actually pretty straight forward the students’ and courses’ methods are the same. In MobX terminology, there are , stuff that for changes, and , stuff for changes. From there the rest is magic pretty magical! observables is watched observers that watches First we simply declare as the first parameter of . * const store observable() This is how you declare an observable without using the decorator syntax ( _@observable_ ). Inside the object passed to there are three places to put data in: , and and those are defined as . If it’s the first time you have come across a , don’t worry, it’s just a fancy object with a nice way to access the contents in it (setters and getters). In a plain JS object data is accessed like this: or , On a map you’d access it like this: . There are a couple of advantages to this, and in this particular project it saved me from using a lot of and (from Lodash). observable() students courses, enrollment, observable.map() Map object.key1.key2 object['key1']['key2'] object.get('key1').get('key2') _.set() _.assign() Then come the store methods to add, update, and remove students and courses from the store. They are just plain with a some error handling. .set() The next interesting bit comes in the enrollment handling. This idea definitively has a Redux flavor to it ( ) and it’s useful in this case. I’m making a object with the key being equal to the course’s ID and the value being an array of the enrolled students’ IDs. It looks like this: Relationships and Tables {course1: ['student1', 'student2', 'student3'],course2: ['student4', 'student5', 'student6'],} Where the action happens is in the method. Let’s break it down: it returns a function, which is the MobX expression to watch for changes in the elements inside it and to automatically update its value. Nothing fancy there. Next, it gets the element in the enrollment map that matches the ID of the course passed as an argument, which returns an array of the students’ IDs. Then a through the array substitutes each student’s ID for the whole student object. Note that that last lonely is applied to and to get the actual data.Thus the result of method is an array of all the students’ objects enrolled in a particular course, sorry, an so any changes to the data inside the function will update it’s return value and do the appropriate re-renders! 🤩 enrolledStudents computed(() => {...}) .map() .get() computed() enrolledStudents observable array Here’s a simple React component to shows this in practice: This is a pretty standard React components except for the and the . observer store First, a couple of students and a course are defined and added to the store. Then is enrolled in the course. Next we map through the method from the store using the ID of the course for the list of students I want and the results are as expected. student1 enrolledStudents The interesting part happens when you press the button “Enroll Student 2”.In the store, the student ID is added to the array of the corresponding course map, and MobX takes care of keeping it all in sync, correctly the value of and doing the appropriate re-renders. And all of that happens because of L39 where we wrap inside ! compute enrolledStudents , StudentsList observer() Note that your components can get access to the store in a variety of ways. You can import the component from the file just like in the previous example, you can pass it down as a prop from a parent container, or you can use the provider/inject utilities (in my case, I’m fine importing whenever I need to). mobx-react store Conclusion MobX feels indeed a little magical and when I finally made sense of it it was like a gust of fresh air bursting into my React development! (that’s the reference to the top image). Hope you have fun exploring it and keep making cool, awesome stuff!😎
