React with Redux

If you are a developer, computer enthusiast or techie, you must have surely heard the words React Redux floating around you from time to time, maybe from your friends, colleagues or on the internet!

React is a front-end library developed by Facebook and is widely used for building user interfaces mostly for Single Page Applications i.e SPAs. React mainly deals with handling view layer for web and mobile apps. React is currently one of the most popular JS libraries with strong community and foundation behind it. React was created by Jordan Walke. Facebook’s newsfeed and Instagram were one of the first platforms to use React.

React can also be rendered on the server side as well using node and can be used to develop Native apps using React Native. React does not use traditional data binding and uses one-way reactive data flow. It can be used to create mobile applications (React Native). React appreciates reusability, which means that extensive code reusability is supported. Thus we can make IOS, Android and Web applications with the same codebase.

React allows developers to create large web applications which can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application. React corresponds to “view” in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks.

From the time component is rendered on the DOM till it is unmounted, it goes through various lifecycle hooks which can be used to perform various component dependent functions such as componentWillMount, componentDidMount, componentWillReceiveProps, componentWillUpdate, render, componentDidUpdate, componentWillUnmount are React life-cycle methods which can be used as when wanted. Now let’s dive into these lifecycle methods.

componentWillMount: It is instantiated just before the occurrence of mounting. render() is called at a later stage and thus calling setState() in this method synchronously will not trigger additional rendering.

componentDidMount: It is instantiated immediately after a component has been mounted. All initialization that needs DOM nodes should be added here. This is a good place to instantiate request from a network if data is to be extracted from a remote end point.

componentWillReceiveProps: It is invoked before a mounted component receives new props.

componentWillUpdate: It is invoked just before rendering when new props or state are being received.

render: It does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.

componentWillUnmount: It is invoked immediately before a component is unmounted and destroyed.

So this gives us some idea of what React is and how we can make use of it to make or elevate our projects. Now let’s dive into Redux.

Redux is basically data-store. It is not compulsory that you have to use Redux with React and there are also a lot of alternatives to Redux as well, specifically Flux. “But the Redux and React both starts with letter “R” they are preferred to use together”. I am joking of course, but Redux is most preferred to be used with React.

Redux is a predictable state container for JavaScript apps. A Redux store is simply a wrapper around the state tree and which provides us methods for interacting with it. Redux helps you write applications that behave consistently and run in different environments. Redux can be used together with React, or with any other view library. It is very small (2kB) and has no dependencies.

The state of your app is represented by a single, immutable, plain JavaScript object called a “state tree”. The state tree is read-only. Changes to the state tree are not performed directly but are initiated by dispatching an “action”, which is a plain JavaScript object identifying what part of the state should change. Actual changes to the state tree are described through pure functions called as “reducers” that take the current state and an action, and which return a new state.

One of the interesting effects of Redux is that your actions end up defining explicitly what could possibly affect your application. It’s self-documenting! This often leads to actions being the first things that are defined for an application, as it spells out how the rest of the application is to be built.

Action “types” are defined as constants whose values are either all uppercase strings or Symbols. The actions are just plain JavaScript objects. The only constraint is that they must have a “type” property.

Wrapping up, learning React-Redux has been fun, challenging and a fulfilling experience.

 

Paresh Borkar