{"id":6859,"date":"2019-04-03T14:28:54","date_gmt":"2019-04-03T12:28:54","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=6859"},"modified":"2023-09-20T09:54:48","modified_gmt":"2023-09-20T07:54:48","slug":"sharepoint-framework-and-mobx-how-to-make-app-data-management-easier","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/en\/sharepoint-framework-and-mobx-how-to-make-app-data-management-easier\/","title":{"rendered":"SharePoint Framework and MobX \u2013 How to make state management easier?"},"content":{"rendered":"\n

Let\u2019s say our amazing blog inspired you to create your SPFx solutions. You are getting better and you are making more complex solutions. Suddenly your WebParts are composed of several nested components. For example, something like this:<\/p>\n\n\n\n

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

Fig. 1 A mockup of an example solution<\/p>\n\n\n\n

Some of them are just labels or containers, some \u2013 beautifully handled inputs and other \u2013 \u2018like it\u2019 stars with the most awesome animation. But how to make sure that your components are sharing the same data? How to pass information about click on that most nested star to the top label?<\/p>\n\n\n\n

For this article series, I\u2019m assuming you develop your SPFx solutions with React. If you don\u2019t, you should try it \ud83d\ude42<\/p>\n\n\n\n

The first thing that comes to mind is to use component props and states. The main container pass function to the bottom container, then to the left column, then to the star. The star state changes. Component triggers passed function with the state in argument, and then data is transmitted to \u2018the top\u2019 and then passed (also via props) to the label. Another way is to use refs, but the issue is similar. Developer has to pass through all nested components.<\/p>\n\n\n\n

But that\u2019s only one \u2018set\u2019 of data passed. Let\u2019s say rows shares information with images on the right, and the left column reacts to changes in the middle container. It starts to look complicated.<\/p>\n\n\n\n

What if there was a simpler way to pass all that data? Imagine one box with all the information you want to share between components. App sections could just put in or pull out data from the box. You\u2019d have to make sure that every component has access to the box, and that\u2019s all.<\/p>\n\n\n\n

This idea is embodied in MobX<\/a> \u2013 \u2018library that makes state management simple and scalable\u2019.<\/p>\n\n\n\n

In MobX\u2019s world, our box is called a \u2018store\u2019, sets of data \u2013 app state or observables, modifications of data \u2013 actions and reactions to those changes \u2013 well, reactions.<\/p>\n\n\n\n

It works great with React, which means we can easily implement it in our SPFx solutions. How to do it? You\u2019re going to find out in the next articles of this series.<\/p>\n\n\n

\n \n
\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n<\/div>\n \n\n
\n 4.6\/5 ( votes: 9) <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"

Let\u2019s say our amazing blog inspired you to create your SPFx solutions. You are getting better and you are making … Continued<\/a><\/p>\n","protected":false},"author":546,"featured_media":7293,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1320],"tags":[1345,1346,1446,1439,1444,1445],"class_list":["post-6859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hard-development","tag-sharepoint-en","tag-office-365-en","tag-mobx-en","tag-office-365-competency-center-en","tag-sharepoint-framework-en","tag-spfx-en"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/01\/tadas-sar-717999-unsplash.jpg","category_names":["Hard development"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/6859"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/comments?post=6859"}],"version-history":[{"count":3,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/6859\/revisions"}],"predecessor-version":[{"id":24333,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/6859\/revisions\/24333"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/media\/7293"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/media?parent=6859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/categories?post=6859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/tags?post=6859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}