{"id":6883,"date":"2019-04-30T12:54:26","date_gmt":"2019-04-30T10:54:26","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=6883"},"modified":"2023-11-07T08:20:39","modified_gmt":"2023-11-07T07:20:39","slug":"sharepoint-framework-and-mobx-basic-ideas-and-apis","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/en\/sharepoint-framework-and-mobx-basic-ideas-and-apis\/","title":{"rendered":"SharePoint Framework and MobX \u2013 Basic ideas and APIs"},"content":{"rendered":"\n

For the first article in this series, go to this post.<\/a><\/p>\n\n\n\n

It\u2019s fairly easy to implement MobX in your SPFx solution. You have to know few basic concepts and then you\u2019re ready to rock\u2019n\u2019roll. There are four fundamental elements:<\/p>\n\n\n\n

\"Diagram<\/a><\/figure>\n\n\n\n

Fig. 1 Diagram of MobX’s basics<\/p>\n\n\n\n

First of all, the state<\/strong>. It\u2019s the main data model of your app. The state is represented by observables \u2013 properties that can change over time. In other words \u2013 components are dependent of this information and you want them to react to changes.<\/p>\n\n\n

\n@observable classProperty = value;\n<\/pre><\/div>\n\n\n
Next, there are actions<\/strong> \u2013 functions that update the state. They change the values of observables. That\u2019s their only purpose.<\/p>\n\n\n
\n@action classMethod (value){\nthis.classProperty = value;\n}\n<\/pre><\/div>\n\n\n
Finally, we have two elements that react to state changes \u2013 computed values<\/strong> and reactions<\/strong>. First ones are properties that are based on observable values. The easiest example is the arithmetical sum. Observable A + observable B = computed value C. Modifications of A or B cause changes of C\u2019s value.<\/p>\n\n\n
\n@computed get classPropertyC() {\nreturn this.classPropertyA + this.classPropertyB;\n}\n<\/pre><\/div>\n\n\n
And last but not least, we encounter reactions<\/strong>. Their name is pretty self-explanatory. They\u2019re functions invoke by state changes. So, we could say that they \u2018react\u2019 to those changes. There are 3 types:<\/p>\n\n\n\n