{"id":79311,"date":"2017-09-08T00:43:06","date_gmt":"2017-09-08T00:43:06","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/react-redux-building-modern-web-apps-with-the-arcgis-js-api\/"},"modified":"2020-02-18T09:36:47","modified_gmt":"2020-02-18T17:36:47","slug":"react-redux-building-modern-web-apps-with-the-arcgis-js-api","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api","title":{"rendered":"React Redux: Building Modern Web Apps with the ArcGIS JS API"},"author":7251,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[23771],"tags":[25781,26141,549072,27491,30471],"industry":[],"product":[36831,36601],"class_list":["post-79311","blog","type-blog","status-publish","format-standard","hentry","category-3d-gis","tag-3d","tag-city-modeling","tag-esrirdzurich","tag-jsapi4","tag-web-applications","product-js-api-arcgis","product-developers"],"acf":{"short_description":"I would like to share my experience building a React Redux app with the ArcGIS API for JavaScript (ArcGIS JS API). It is exciting how wel...","flexible_content":[{"acf_fc_layout":"content","content":"<p>I would like to share my experience building a <a title=\"React\" href=\"https:\/\/facebook.github.io\/react\/\" target=\"_blank\" rel=\"noopener\">React<\/a> <a title=\"Redux\" href=\"http:\/\/redux.js.org\/\" target=\"_blank\" rel=\"noopener\">Redux<\/a> app with the <a title=\"ArcGIS API for JavaScript\" href=\"https:\/\/developers.arcgis.com\/javascript\/\" target=\"_blank\" rel=\"noopener\">ArcGIS API for JavaScript<\/a> (ArcGIS JS API). It is exciting how well these work together. I will also share some boilerplate source code to help you get started with your own React Redux ArcGIS application.<\/p>\n<p>There are a number of reasons to take a closer look at the React Redux framework:<\/p>\n<ul>\n<li>It\u2019s hot (both literally and figuratively speaking). More on Hot Module Replacement below.<\/li>\n<li>There\u2019s total separation of data and presentation.<\/li>\n<li>Redux makes state management more predictable (fewer bugs!)<\/li>\n<li>React provides reusable UI components, blazing fast performance, and support for mobile (React Native) and server side rendering.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>Crash Course: React + Redux<\/h2>\n<p>Before we start, here is a very quick intro to React and Redux.<\/p>\n<p>The <strong>Redux Store<\/strong> keeps the application state. This state can be updated by dispatching actions. An action is nothing more than a JSON object with a type and some parameters (e.g., { type: &#8216;SET_DATE&#8217;, date: &#8216;2017-03-15T13:24:00.000Z&#8217; }). The store has a reducer, which, taking into account the action and the previous state, will produce the next state.<\/p>\n<p><strong>React<\/strong> lets you build components that react to changes of the application state. Components affected by a state change are re-rendered with the new data. Components also dispatch actions, for example when a button is clicked.<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/09\/react-redux-overview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-86097\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/09\/react-redux-overview-1024x731.png\" alt=\"React Redux Overview\" width=\"640\" height=\"456\" \/><\/a><\/p>\n<p>Learn more: <a title=\"React\" href=\"https:\/\/facebook.github.io\/react\/\" target=\"_blank\" rel=\"noopener\">React<\/a>,\u00a0<a title=\"Redux\" href=\"http:\/\/redux.js.org\/\" target=\"_blank\" rel=\"noopener\">Redux<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>The Demo App<\/h2>\n<p>To demonstrate the basics, I created a demo app that lets users sign in with their ArcGIS Online account and open a scene. I added a simple selection tool (Ctrl to select multiple features) and a simple sun position slider.<\/p>\n<p>The source code and installation instructions are available <a title=\"GitHub React Redux JS API Repository\" href=\"https:\/\/github.com\/Esri\/react-redux-js4\" target=\"_blank\" rel=\"noopener\">on GitHub<\/a>.<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/09\/react-redux-jsapi-screenshot1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-86098\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/09\/react-redux-jsapi1-1024x587.jpg\" alt=\"Demo App Screenshot\" width=\"640\" height=\"366\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Software Architecture<\/h2>\n<p>The application is a textbook React Redux app as you would find in many tutorials. It has the usual structure of components and reducers. To make this possible, I have encapsulated the ArcGIS JS API in a middleware. I have implemented one middleware for the ArcGIS Online authentication, and another one for the SceneView.<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/09\/react-redux-jsapi-overview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-86096\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/09\/react-redux-jsapi-overview-1024x691.png\" alt=\"React Redux JS API Overview\" width=\"640\" height=\"431\" \/><\/a><\/p>\n<p>The middleware intercepts actions, interacts with the ArcGIS JS API if necessary, then forwards the action or dispatches new actions. This pattern provides a nice encapsulation for store behavior that does not form part of the data. In other words, it keeps non-data objects out of the store (e.g., instances of esri\/views\/SceneView) and makes testing a lot easier.<\/p>\n<p>Learn more: <a title=\"Why you aren't using Redux middleware enough\" href=\"https:\/\/medium.com\/@jacobp100\/you-arent-using-redux-middleware-enough-94ffe991e6\" target=\"_blank\" rel=\"noopener\">You Aren\u2019t Using Redux Middleware Enough<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h2>The Magic Sauce<\/h2>\n<p>What is the magical part of the configuration that makes the Esri modules directly accessible in the project? On one hand, we have a pure React Redux app; on the other hand, we are loading Esri modules as if they are right there in the project structure.<\/p>\n<p>This works because we compile and pack the React Redux app with all its dependencies into a single AMD module. However, all Esri modules are automatically marked as external and skipped in this process. The ArcGIS JS API then runs the resulting AMD module as the main application, which makes the Esri dependencies available to the app.<\/p>\n<p>&nbsp;<\/p>\n<h2>Redux Dev Tools Extension<\/h2>\n<p>One of the greatest things about Redux is the <a title=\"Redux Dev Tools Extension\" href=\"http:\/\/extension.remotedev.io\/\" target=\"_blank\" rel=\"noopener\">Dev Tools Extension<\/a>. This extension lets you inspect the application state live as it updates, and it lets you dispatch actions from the console. This is great for rapid prototyping: you don\u2019t have to build a UI to test a feature.<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/09\/react-redux-jsapi-screenshot2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-86099\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/09\/react-redux-jsapi2-1024x505.jpg\" alt=\"Redux Dev Tools Extension Screenshot\" width=\"640\" height=\"315\" \/><\/a><\/p>\n<p>For example, when developing the sun position slider, I first implemented the SET_DATE action, and added the corresponding environment updates in the SceneView middleware. I could then try to change the sun position by dispatching SET_DATE actions from the console, and see the state update accordingly. Once that was working correctly, I implemented a range slider component to dispatch those same actions.<\/p>\n<p>&nbsp;<\/p>\n<h2>Hot Module Replacement<\/h2>\n<p>Hot Module Replacement exchanges, adds, or removes\u00a0modules while an application is running, without a full reload.\u00a0This has numerous benefits for development:<\/p>\n<ul>\n<li>Application state is retained, which is lost during a full reload.<\/li>\n<li>You save development time by only reloading part of the application (e.g., don\u2019t wait for the SceneView to reload).<\/li>\n<li>The UI can be tweaked quickly, in real time (fast prototyping).<\/li>\n<\/ul>\n<p>How it works: when a module is updated, the front end is notified and downloads the changes. For <strong>components<\/strong>, the application DOM is refreshed with the updated component. For <strong>reducers<\/strong>, the application store replaces its reducer with the updated reducer.<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/09\/react-redux-jsapi-screenshot3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-86100\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/09\/react-redux-jsapi-screenshot3-1024x374.jpg\" alt=\"Hot Module Replacement Example\" width=\"640\" height=\"233\" \/><\/a><\/p>\n<p>Looking closer, refreshing the DOM would inevitably reload the SceneView after each component update. To prevent this from happening, the SceneView is created and stored in the middleware. In fact, the middleware stores both a SceneView object and its container element. On refresh, the existing container is automatically attached to the refreshed React component.<\/p>\n<p>Learn more: <a title=\"Hot Module Replacement\" href=\"https:\/\/webpack.js.org\/concepts\/hot-module-replacement\/\" target=\"_blank\" rel=\"noopener\">Hot Module Replacement<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Testing<\/h2>\n<p>React makes front end testing a breeze. Components can be tested using\u00a0<a title=\"Jest\" href=\"http:\/\/facebook.github.io\/jest\/\" target=\"_blank\" rel=\"noopener\">Jest<\/a>\u00a0and <a title=\"Enzyme\" href=\"http:\/\/airbnb.io\/enzyme\/index.html\" target=\"_blank\" rel=\"noopener\">Enzyme<\/a>. Jest is an awesome testing tool developed by Facebook. Enzyme sits on top\u00a0and is a testing utility for React developed by Airbnb. The combination of React and Enzyme is a game changer.<\/p>\n<p>You can do shallow tests to check if everything is rendered OK and the right actions are dispatched when clicked. You can do deep tests to check if several components are loaded together correctly. It allows for an unprecedented level of front end testing.<\/p>\n<p>To get you started, I have added some Jest and Enzyme tests to every module of the boilerplate.<\/p>\n<p>Learn More: <a title=\"Writing Tests - Redux\" href=\"http:\/\/redux.js.org\/docs\/recipes\/WritingTests.html\" target=\"_blank\" rel=\"noopener\">Writing Tests &#8211; Redux<\/a>,\u00a0<a title=\"Jest\" href=\"http:\/\/facebook.github.io\/jest\/\" target=\"_blank\" rel=\"noopener\">Jest<\/a>, <a title=\"Enzyme\" href=\"http:\/\/airbnb.io\/enzyme\/index.html\" target=\"_blank\" rel=\"noopener\">Enzyme<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Build Process<\/h2>\n<p>Building the application has been a challenge due to the ArcGIS JS API\u2018s dependency on Dojo. Nevertheless, there exists a very elegant solution.<\/p>\n<p>The React Redux app is compiled and packed into an AMD module, which fits into the Dojo toolkit. We use <a title=\"Babel\" href=\"https:\/\/babeljs.io\/\" target=\"_blank\" rel=\"noopener\">Babel<\/a> to transpile ES6 to regular JavaScript, and then <a title=\"Webpack\" href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" rel=\"noopener\">Webpack<\/a> to bundle the application into a single AMD module. However, we use a regular expression to exclude all Esri modules from this build process.<\/p>\n<p>The ArcGIS JS API loads the resulting module as the main application (as defined in dojoConfig.js). This makes the Esri dependencies available to the app and allows everything to run smoothly.<\/p>\n<p>&nbsp;<\/p>\n<h2>Resources<\/h2>\n<p><a title=\"React Redux JS4\" href=\"https:\/\/github.com\/Esri\/react-redux-js4\" target=\"_blank\" rel=\"noopener\">React Redux JS4 Boilerplate on Github<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Credits<\/h2>\n<p>To code this boilerplate application, I have used <a title=\"this work\" href=\"https:\/\/github.com\/odoe\/esrijs4-redux\" target=\"_blank\" rel=\"noopener\">this work<\/a> by Rene Rubalcava as a starting point.<\/p>\n"}],"authors":[{"ID":7251,"user_firstname":"Michael","user_lastname":"Van den Bergh","nickname":"mich9277","user_nicename":"mich9277","display_name":"Michael Van den Bergh","user_email":"mvandenbergh@esri.com","user_url":"","user_registered":"2018-03-02 00:19:31","user_description":"","user_avatar":"<img alt='' src='https:\/\/secure.gravatar.com\/avatar\/b986d8aaee11c83bd3c7abcde06088ecf333b51df3866a8d58f7d371feb76d22?s=96&#038;d=blank&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/b986d8aaee11c83bd3c7abcde06088ecf333b51df3866a8d58f7d371feb76d22?s=192&#038;d=blank&#038;r=g 2x' class='avatar avatar-96 photo' height='96' width='96' loading='lazy' decoding='async'\/>"}],"related_articles":"","card_image":false,"wide_image":false},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Redux: Building Modern Web Apps with the ArcGIS JS API<\/title>\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.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Redux: Building Modern Web Apps with the ArcGIS JS API\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-18T17:36:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api\"},\"author\":{\"name\":\"Michael Van den Bergh\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/32357590cfaa6923d7479494b6d0d872\"},\"headline\":\"React Redux: Building Modern Web Apps with the ArcGIS JS API\",\"datePublished\":\"2017-09-08T00:43:06+00:00\",\"dateModified\":\"2020-02-18T17:36:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"3D\",\"City Modeling\",\"EsriRDZurich\",\"jsapi4\",\"Web Applications\"],\"articleSection\":[\"3D Visualization &amp; Analytics\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api\",\"name\":\"React Redux: Building Modern Web Apps with the ArcGIS JS API\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2017-09-08T00:43:06+00:00\",\"dateModified\":\"2020-02-18T17:36:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Redux: Building Modern Web Apps with the ArcGIS JS API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/32357590cfaa6923d7479494b6d0d872\",\"name\":\"Michael Van den Bergh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b986d8aaee11c83bd3c7abcde06088ecf333b51df3866a8d58f7d371feb76d22?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b986d8aaee11c83bd3c7abcde06088ecf333b51df3866a8d58f7d371feb76d22?s=96&d=blank&r=g\",\"caption\":\"Michael Van den Bergh\"},\"url\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Redux: Building Modern Web Apps with the ArcGIS JS API","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.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api","og_locale":"en_US","og_type":"article","og_title":"React Redux: Building Modern Web Apps with the ArcGIS JS API","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2020-02-18T17:36:47+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api"},"author":{"name":"Michael Van den Bergh","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/32357590cfaa6923d7479494b6d0d872"},"headline":"React Redux: Building Modern Web Apps with the ArcGIS JS API","datePublished":"2017-09-08T00:43:06+00:00","dateModified":"2020-02-18T17:36:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api"},"wordCount":11,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["3D","City Modeling","EsriRDZurich","jsapi4","Web Applications"],"articleSection":["3D Visualization &amp; Analytics"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api","name":"React Redux: Building Modern Web Apps with the ArcGIS JS API","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2017-09-08T00:43:06+00:00","dateModified":"2020-02-18T17:36:47+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/react-redux-building-modern-web-apps-with-the-arcgis-js-api#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"React Redux: Building Modern Web Apps with the ArcGIS JS API"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/32357590cfaa6923d7479494b6d0d872","name":"Michael Van den Bergh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b986d8aaee11c83bd3c7abcde06088ecf333b51df3866a8d58f7d371feb76d22?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b986d8aaee11c83bd3c7abcde06088ecf333b51df3866a8d58f7d371feb76d22?s=96&d=blank&r=g","caption":"Michael Van den Bergh"},"url":""}]}},"text_date":"September 8, 2017","author_name":"Michael Van den Bergh","author_page":false,"custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":25781,"name":"3D","slug":"3d","term_group":0,"term_taxonomy_id":25781,"taxonomy":"post_tag","description":"","parent":0,"count":342,"filter":"raw"},{"term_id":26141,"name":"City Modeling","slug":"city-modeling","term_group":0,"term_taxonomy_id":26141,"taxonomy":"post_tag","description":"","parent":0,"count":13,"filter":"raw"},{"term_id":549072,"name":"EsriRDZurich","slug":"esrirdzurich","term_group":0,"term_taxonomy_id":549072,"taxonomy":"post_tag","description":"","parent":0,"count":96,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":30471,"name":"Web Applications","slug":"web-applications","term_group":0,"term_taxonomy_id":30471,"taxonomy":"post_tag","description":"","parent":0,"count":21,"filter":"raw"}],"category_data":[{"term_id":23771,"name":"3D Visualization &amp; Analytics","slug":"3d-gis","term_group":0,"term_taxonomy_id":23771,"taxonomy":"category","description":"","parent":0,"count":686,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":761,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/79311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/7251"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=79311"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/79311\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=79311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=79311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=79311"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=79311"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=79311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}