React-Redux Flow: Detailed Guide

React-Redux Flow: Detailed Guide hackernoon.com2 years ago in #Dev Love21

@mikenath223Michgolden Ukeje I write code, run tests, deploy. iterate… State. That’s one word behind Redux’s existence in the React framework. But wait a minute what is the state of an application, and why does it matter in single-page applications(SPA). Oh, single-page applications? What are those too? Let’s back it up a bit and take it one step at a time. This guide assumes you already have a fundamental understanding of React and Redux architecture and API. However, if the opposite is the case you can check out the Redux documentation here and the React documentation here, as we would focus more on understanding what happens during React-Redux data flow. In the course of this article, we would discuss what single-applications are and what state means in a React context, as sort of a refresher course. Next, we would dive into explaining how Redux plays a role in react, breaking down the various parts that make up the React-Redux flow, then cementing this explanation with various code examples. If you consider the introductory sections of the article quite long and want to quickly head over to the juicy part, you can simply jump over to the subheading titled — Understanding the way Redux works, else stick with me to get a full understanding. Understanding Single Page Applications (SPAs) A single-page application is an app that works inside a browser and doesn’t require the user to reload the page because they interact with the user dynamically, rewriting the content of a web page with the help of JavaScript. They are faster than the traditional web applications because they execute logic directly in the web browser rather than the server. After the initial page load, only data is sent back and forth rather than the whole HTML, this helps to reduce bandwidth. Single-page apps are generally created with javascript frameworks like React.JS, Angular.JS, Vue.JS, Ember.js, and many more. Pros of Single Page Applications (SPAs) Speed and Responsiveness: SPAs are fast. Hence a server does not need to reload most resources(HTML, CSS, and scripts) with them, just the initial loading, and then afterward the next interactions only load data from the server. Adaptability: You can simply go ahead and reuse the same back-end code from a web-based app for mobile app development. In general, SPAs feel more like an app than a website, hence there is no need to try to adapt its design for mobile users. Simplified and Streamlined development: Due to the lack of need to write page rendering-code directly on the server, the development process is simplified and streamlined, one can simply kick-start the development from a file http://file://URL, without utilizing any server. Cons of Single Page Applications (SPAs) Memory leaks: This means loss of computer memory and can happen in SPAs due to event listeners. Security Issues: When compared to traditional applications, SPAs are less secure. They are vulnerable to cross-site scripting(XSS), and hence are open to exploits from attackers who could inject client-side scripts into web applications by other users. Poor crawl accessibility: SPAs have a smaller semantic kernel than a conventional multi-page application. You can only put a small number of keywords on a page. This might lower the SEO ranking of a page unless you carefully consider beforehand what content best matches your users’ request.  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply