{"id":194,"date":"2019-03-26T13:46:18","date_gmt":"2019-03-26T12:46:18","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/how-mobx-helps-you-manage-your-state\/"},"modified":"2019-11-28T17:45:33","modified_gmt":"2019-11-28T16:45:33","slug":"how-mobx-helps-you-manage-your-state","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/","title":{"rendered":"How MobX helps you manage your state"},"content":{"rendered":"<p>Managing state is one of the hottest and somewhat controversial topics in the frontend development world. A lot of effort has been made by several teams across the world to address state management with a clean and simple approach, creating libraries such as <strong>Redux<\/strong>, <strong>NgRx<\/strong>, <strong>RxJS<\/strong>, <strong>MobX<\/strong> and many others.<\/p>\n<p><q>Anything that can be derived from the application state, should be derived. Automatically. (Micheal Weststrate)<\/q><\/p>\n<p>At <a href=\"https:\/\/milan2018.codemotionworld.com\/conference\/\" rel=\"noopener noreferrer\" target=\"_blank\">Codemotion Milan 2018<\/a>, <a href=\"https:\/\/milan2018.codemotionworld.com\/speaker\/4028\/\" rel=\"noopener noreferrer\" target=\"_blank\">Max Gallo<\/a> from DAZN gave a nice overview of MobX, highlighting some of its main features.<br \/>\nMobX is a simple and scalable state management library, based on the functional reactive programming paradigm. In a nutshell, it allows us to easily separate views and business logics.<\/p>\n<h2>Core concepts<\/h2>\n<p>Compared to other state management libraries, MobX is <strong>easier to use<\/strong> since it is designed around three core concepts only: <strong>observables<\/strong>, <strong>computed values<\/strong> and <strong>reactions<\/strong>.<br \/>\nAn observable is a data structure to monitor, looking for changes. MobX keeps track of any changes of an observable object. Whenever the value of an observable changes, MobX knows it. Any data structure can be marked as observable like objects, arrays, class instances and so on. Making an object observable is as easy as adding one decorator, the <strong>@observable<\/strong> decorator, to be precise.<br \/>\nComputed values, as the name implies, are values derived from observables. Every time the observables are modified, the computed values are updated automatically by MobX. Again, a computed value is defined by decorating a variable with the decorator <strong>@computed<\/strong>.<br \/>\nThe last core concept of MobX is reactions. They are similar to computed values since they are triggered when an observable changes. But instead of computing a value, they execute code. Simply put, reactions tell MobX what to do when an observable changes.<br \/>\nA custom reaction can be created using the autorun function. MobX will execute the function passed to autorun every time one of the observables or computed values referenced in its body changes.<\/p>\n<h2>Integration with React<\/h2>\n<p>MobX can be easily integrated with React. Thanks to the @observable decorator, it is possible to make a React component be observed. Moreover, the react component can be refreshed (triggering the <strong><em>render()<\/em><\/strong> function) automatically whenever the state changes.<\/p>\n<h2>MobX State Tree<\/h2>\n<p>Unlike other frameworks, MobX is <strong>not opinionated<\/strong> about how user events should be handled. Although flexibility is a must for a library such as MobX, sometimes having a predefined structure to follow rather than starting from scratch may help. This is why <strong>MobX State Tree<\/strong> (MST) was created. MST is a state container built on top of MobX that allows us to maintain a strongly typed application state: the tree store. The tree store is a set of mutable but strongly typed objects. In MST jargon, the shape of the tree defines its type information while the state represents the data it stores. At any time, snapshots of the tree can be generated. Snapshots are immutable versions of the store, which can be converted to a live tree when needed.<br \/>\nA typical MST store is built providing three key definitions: the <strong>model<\/strong>, which describes the structure of the mutable and observable state, the <strong>views<\/strong> which contain the output computed values and the <strong>actions<\/strong>, which are the interfaces to update the model from outside.<br \/>\nViews can return filtered values by simply using the <strong><em>filter<\/em><\/strong> method. Since the values stored in the tree are actually MobX observables, filtered values (which are, in essence, computed values) are updated automatically. Moreover, models in MobX State Tree are <strong>composable<\/strong>. Each model can capture only a small piece of the application state, allowing the developer to combine them only when needed. Types can be composed directly or by using the method <strong><em>compose()<\/em><\/strong>.<\/p>\n<h2>MST Dependency Injection<\/h2>\n<p>When creating a new store it is possible to provide external data to the <em><strong>create<\/strong><\/em> method. External data is used to enrich the store with a proper <strong>environment<\/strong>. Anything can be provided, including variables, arrays, functions, utilities etc. Objects passed as environment data are accessible to any descendant in the tree structure by using the function <strong><em>getEnv(self)<\/em><\/strong>. This mechanism is very useful to inject dependencies to the tree such as loggers, transport functions, test-specific data, etc.<\/p>\n<h2>Trees and Forests<\/h2>\n<p>MobX State Tree supports more than one tree store per application. Developers can define multiple stores, one per each application domain. While this approach is easier to model when reasoning by domain it less convenient when in need to perform actions on multiple domains at the same time or provide a single environment to all the stores. The alternative pattern is the single root store. Instead of building a forest of tree stores, there is a single hierarchy of stores, all leaves of the same root store. This allows easier global actions and global dependency injection, but can lead to tightly coupled stores, where interactions between stores is possible only by traversing the whole tree structure.<\/p>\n<h2>Conclusions<\/h2>\n<p>MobX is a great tool to learn reactive programming, as it is <strong>easier<\/strong> to use compared to other reactive frameworks. MobX State Tree adds a well-defined structure to model the application on top of MobX, combining the best features of both <strong>immutability<\/strong> and <strong>mutability<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Managing state is one of the hottest and somewhat controversial topics in the frontend development world. A lot of effort has been made by several teams across the world to address state management with a clean and simple approach, creating libraries such as Redux, NgRx, RxJS, MobX and many others. Anything that can be derived&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/\">Read more<\/a><\/p>\n","protected":false},"author":31,"featured_media":195,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[31],"tags":[22],"collections":[],"class_list":{"0":"post-194","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-developer","8":"tag-codemotion-milan","9":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How MobX helps you manage your state - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Codemotion and Facebook organized the Tech Leadership Training boot camp, heres a personal reportage from one of our attendees.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How MobX helps you manage your state\" \/>\n<meta property=\"og:description\" content=\"Codemotion and Facebook organized the Tech Leadership Training boot camp, heres a personal reportage from one of our attendees.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-26T12:46:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-28T16:45:33+00:00\" \/>\n<meta name=\"author\" content=\"Sergio Monteleone\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergio Monteleone\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/\"},\"author\":{\"name\":\"Sergio Monteleone\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1175f6a51ed61a57ce2bbe8f28682052\"},\"headline\":\"How MobX helps you manage your state\",\"datePublished\":\"2019-03-26T12:46:18+00:00\",\"dateModified\":\"2019-11-28T16:45:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/\"},\"wordCount\":859,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg\",\"keywords\":[\"Codemotion Milan\"],\"articleSection\":[\"Web Developer\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/\",\"name\":\"How MobX helps you manage your state - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg\",\"datePublished\":\"2019-03-26T12:46:18+00:00\",\"dateModified\":\"2019-11-28T16:45:33+00:00\",\"description\":\"Codemotion and Facebook organized the Tech Leadership Training boot camp, heres a personal reportage from one of our attendees.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg\",\"width\":1200,\"height\":671},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Developer\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How MobX helps you manage your state\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1175f6a51ed61a57ce2bbe8f28682052\",\"name\":\"Sergio Monteleone\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/01ed53edef772160c6afbbad5e36940f0cd612cbcf1a6dc3178588bd2b44708c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/01ed53edef772160c6afbbad5e36940f0cd612cbcf1a6dc3178588bd2b44708c?s=96&d=mm&r=g\",\"caption\":\"Sergio Monteleone\"},\"description\":\"Software developer and the co-founder of Moga Software s.r.l., a software house based in Italy. I tend to write code for anything that has a C\/C++ compiler, but don't mind using other technologies and languages. I love cats, dogs and, more in general, any lifeform when Lifeform.numLegs() &lt;= 4.\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/sergio-monteleone\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How MobX helps you manage your state - Codemotion Magazine","description":"Codemotion and Facebook organized the Tech Leadership Training boot camp, heres a personal reportage from one of our attendees.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/","og_locale":"en_US","og_type":"article","og_title":"How MobX helps you manage your state","og_description":"Codemotion and Facebook organized the Tech Leadership Training boot camp, heres a personal reportage from one of our attendees.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2019-03-26T12:46:18+00:00","article_modified_time":"2019-11-28T16:45:33+00:00","author":"Sergio Monteleone","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Sergio Monteleone","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/"},"author":{"name":"Sergio Monteleone","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1175f6a51ed61a57ce2bbe8f28682052"},"headline":"How MobX helps you manage your state","datePublished":"2019-03-26T12:46:18+00:00","dateModified":"2019-11-28T16:45:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/"},"wordCount":859,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg","keywords":["Codemotion Milan"],"articleSection":["Web Developer"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/","name":"How MobX helps you manage your state - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg","datePublished":"2019-03-26T12:46:18+00:00","dateModified":"2019-11-28T16:45:33+00:00","description":"Codemotion and Facebook organized the Tech Leadership Training boot camp, heres a personal reportage from one of our attendees.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg","width":1200,"height":671},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/how-mobx-helps-you-manage-your-state\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Web Developer","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/"},{"@type":"ListItem","position":4,"name":"How MobX helps you manage your state"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1175f6a51ed61a57ce2bbe8f28682052","name":"Sergio Monteleone","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/01ed53edef772160c6afbbad5e36940f0cd612cbcf1a6dc3178588bd2b44708c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/01ed53edef772160c6afbbad5e36940f0cd612cbcf1a6dc3178588bd2b44708c?s=96&d=mm&r=g","caption":"Sergio Monteleone"},"description":"Software developer and the co-founder of Moga Software s.r.l., a software house based in Italy. I tend to write code for anything that has a C\/C++ compiler, but don't mind using other technologies and languages. I love cats, dogs and, more in general, any lifeform when Lifeform.numLegs() &lt;= 4.","url":"https:\/\/www.codemotion.com\/magazine\/author\/sergio-monteleone\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG-600x600.jpg","author_info":{"display_name":"Sergio Monteleone","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/sergio-monteleone\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg",1200,671,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG-300x168.jpg",300,168,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG-768x429.jpg",768,429,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG-1024x573.jpg",1024,573,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg",1200,671,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg",1200,671,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG.jpg",100,56,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/03\/DtQjRi5UwAAMWcG-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Sergio Monteleone","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/sergio-monteleone\/"},"uagb_comment_info":0,"uagb_excerpt":"Managing state is one of the hottest and somewhat controversial topics in the frontend development world. A lot of effort has been made by several teams across the world to address state management with a clean and simple approach, creating libraries such as Redux, NgRx, RxJS, MobX and many others. Anything that can be derived&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=194"}],"version-history":[{"count":1,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/194\/revisions"}],"predecessor-version":[{"id":557,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/194\/revisions\/557"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/195"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=194"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}