Serverless Web Applications with React and Firebase

18

Git repository link

Component life-cycle:

The constructor method of React Component gets invoked first when the component is mounted. Here, we can set the state of the component.

The render() method is required to render the UI component and examine this.props and this.state and return one of the following types:

  • React elements
  • String and numbers
  • Portals
  • null
  • Booleans

The componentWillMount() method

This method is invoked immediately before componentDidMount. It is triggered before render()method.

The componentDidMount() method

This method is invoked immediately after a component gets the mount. We can use this method to load the data from a remote endpoint to instantiate a network request.

The componentWillReceiveProps() method

This method will be invoked when the mounted component receives new props. This method also allows comparing the current and next values to ensure the changes in props.

The shouldComponentUpdate() method

The shouldComponentUpdate() method is invoked when the component has received the new props and state. The default value is true; if it returns false, React skips the update of the component.

 

The componentWillUnmount() method

This method is invoked immediately before a React Component is unmounted and destroyed. Here, we can perform any necessary cleanup, such as canceling network requests or cleaning up any subscription that was created in componentDidMount.

The componentDidCatch() method

This method allows us to catch the JavaScript errors in React Components. We can log those errors and display another fallback UI instead of the component tree that crashed.

Sample snippet:

What is Redux?

In this technological era, since the requirements for web applications have become increasingly complicated, the state management of an application has a lot of challenges at the code level. For example, in Realtime applications, a lot of data is stored in the cache for faster retrieval apart from the data that is persisted in the database. Similarly, on the UI side, due to complex User Interfaces such as multiple tabs, multiple routes, pagination, filters, and breadcrumbs and more, application state management becomes a very difficult task.

In any application, different components exist, which interact with each other to produce a particular output or a state. There will also be chances that this interaction is so complex that you lost control over the application state. For example, a component or a model updating another component or a model that in turn causes an update of another view. This type of code is difficult to manage. It becomes challenging to add a new feature or fix any bugs because you don’t know when a small change will affect another working functionality.

To reduce such issues, libraries like React removed the direct DOM manipulation and also asynchrony. However, it is only applied to view or presentation layer. The state management of your data is up to the application developers. This is where Redux comes into the picture.

Redux is a framework that manages states in a JavaScript app. This is what the official site says:

Redux is a predictable state container for JavaScript apps.

Redux is very simple. When we talk about Redux, we need to remember three core terms: Store, Action, and Reducer. Here’s what they are:

  1. Store: The state of your application will be managed by Store, which is an object that maintains the application’s state tree. Remember that there should be a single Store in your Redux app. Also, due to imposed restrictions, you can’t directly manipulate or mutate the application store.
  2. Action: To change something in your store, you need to dispatch an Action. An action is nothing but a plain JavaScript object that describes what has happened. Actions allow us to understand what is happening in the app and why and hence makes the state predictable.
  3. Reducer: Finally, to glue actions and state together, we write a Reducer, which is a simple JavaScript function that takes state and action as arguments and returns the new state of the app.

Since we now have a basic understanding of Redux, let’s check the three fundamental principles of Redux, which are as listed:

  1. Single source of truth: A store is simply a state container. As mentioned, in your React App, there should be only a single store and hence it is considered as source of Truth. A single object tree also makes it easy to debug the app.
  2. State is Read Only: To change the state, application has to emit an Action that describes what has happened. No views or other functions can directly write to the state. This restriction prevents any unwanted state changes. Each action will be performed on a centralized object and in order so that we can get an up-to-date state at any point of time. As actions are just plain objects, we can debug and serialize them for testing purposes.
  3. Changes are made with Pure Functions: To describe transformation of the state tree by dispatched actions, write Pure Functions/Reducers. What does the term Pure Function mean? A function is pure if it returns the same value every time a given set of arguments is passed to it. Pure functions do not modify their input arguments. Instead, they use the input to calculate a value and then return that calculated value. Our reducers are pure functions that take state and action as inputs and return new state and not the mutated state. You can have as many reducers as you want, and it is also recommended that you split big reducers to smaller reducers that can manage a specific part of your application tree. Reducers are JavaScript functions, so you can pass additional data to them. They can be built like common functions, which can be used across the application of Presentational and Container components.