{"id":50800,"date":"2016-06-29T08:00:31","date_gmt":"2016-06-29T15:00:31","guid":{"rendered":"https:\/\/redfindevelop.wpengine.com\/blog\/?p=50800"},"modified":"2020-10-05T13:11:57","modified_gmt":"2020-10-05T20:11:57","slug":"building-a-single-page-application-with-react-and-reflux","status":"publish","type":"post","link":"https:\/\/www.redfin.com\/news\/building-a-single-page-application-with-react-and-reflux\/","title":{"rendered":"Building a Single Page Application with React and Reflux"},"content":{"rendered":"
<\/figure>\n
\"Berkeley<\/figure>\n

As one of the most trafficked pages at Redfin, the <\/span>map page<\/span><\/a> has always been a major driving force behind engaging users with the site and helping people find their dream homes. Redfin was the first company to put homes for sale on a map, and we\u2019ve been working on improving that experience ever since.<\/span><\/p>\n

Previously, our map was built out using JSP with <\/span>Dojo<\/span><\/a> on the client side to handle user interactions. For the past year, we have been converting the map to use <\/span>React<\/span><\/a> and <\/span>Reflux<\/span><\/a>, which allows us to take advantage of performance benefits through server-side rendering using <\/span>React Server<\/span><\/a>, our open source framework that we recently announced. This post talks about our setup and how we architected the page to build a single page application using the tools mentioned above.<\/span><\/p>\n

Thinking About the Map Page in React and Reflux<\/b><\/h3>\n

Reflux is an implementation of Flux for unidirectional data flow composed of stores, views, and actions that handles data, displays data, and initiates data fetching respectively. React fits in as the view layer of the model.<\/span>\"RefluxNow let\u2019s walk through a typical map experience:<\/span><\/p>\n

    \n
  1. Some user interaction triggers a search<\/span><\/li>\n
  2. XHR request fires off to the server side to grab data about homes<\/span><\/li>\n
  3. View layer updates with the new data<\/span><\/li>\n<\/ol>\n

    By applying the Reflux model, we get an action that defines some user interaction, a store that listens to the action and fires off an XHR request, and a React component that renders the data. This setup benefits greatly from Reflux\u2019s unidirectional data flow architecture which makes the code path clean and easy to manage.<\/span><\/p>\n

    Deep Dive Into Architecture<\/b><\/h3>\n

    While figuring out the architecture, we encountered several roadblocks:<\/span><\/p>\n