Yes you are right ! , we are here to find out the real use of useEffect hook in ReactJS

Prerequisites
1. Ofcourse its ReactJS ! , The functional programming paradigm and lastly at least a basic understanding of components in reactjs.

What is useEffect

UseEffect is a very powerful hook that can introduce the life cycle methods of a Reactjs class based components in functional components and also it is used to handle side effect functionalities.In functional programming we dont have class as a base for creating components.Everything is a function here (like the good ‘ol vanilla JavaScript days)


With the release of React 16.8 there is a new feature that will replace the redundant and hard to maintain React life cycle methods like ComponentDidMount , ComponentWillMount etc.React has moved from Class to functional components.In this tutorial ill be explaining how you can get data from redux store in your functional component.

The Redux Architecture

The concepts of redux is exactly the same as class with React Hooks and functional components.We create a centralized data store (A collection of reducers).Actions …


First things first,this article is intended for people who are familiar with Angular and MVVM architecture, but yet to try ngrx in their application.

What im trying to put is

  1. How the data flows between components with the help of actions & reducers.
  2. Handling a same set of data in different components from a single store

What im not trying to say is (at least for now :))

  1. All those fancy stuff with regards to ngrx (Effects,Selectors etc)

Synopsis

Creating a list of data (user information) with Angular 8 & using ngrx as a data store. …


For every single page application there must be a store for optimal way of data sharing between components.For Reactjs we have redux/flux and for Angular we have ngrx. For Vuejs we have vuex.

Before you proceed you should have a basic understanding of Vuejs or at least the concept about Model–view–viewmodel (MVVM).We will be having components ,views and styles like every SPA frameworks.Ill be covering vuex from scratch so no prior knowledge in vuex is required.

What is a store ?

A store as for every single page application is a single point of truth(simply data).It provides API’s for modifying…


One of the biggest challenges developers face while developing a web application is how to efficiently manage CSS.Traditional CSS can generate a lot of dead code in our application and thereby impacting the performance as well as size of our bundle.

Traditional CSS is all about static files which contains key(CSS property) and values.In normal scenarios we will be loading a lot of unwanted CSS in our application.Imagine a scenario where we can write CSS in JavaScript as objects or components and the unlimited possibilities to harness the power of JavaScript.

Lets Dig in :-)

Prerequisites

A basic understanding of ReactJS,states,props…


What is code coverage ?

As the good ol google says “In computer science, code coverage is a measure used to describe the degree to which the source code of a program is executed when a particular test suite runs.” ,simple as it is ;)

How do we do it ?

Ingredients
1.Basic knowledge of Angular 2
2,Typescript (if you are coding in type script)
3.Npm
4.Karma Jasmine

and finally some good googling skills ;)

Step 1 : Scaffold your Angular 2 Application ,Install all the necessary packages that comes along with the package.json
In a npm console ,

ng new covereageexample

Navigate…


AngularJS 2 $http testing with Jasmine

Prerequisites
1.Basic knowledge of AngularJS 2 ,Jasmine
2.Understanding of “What is $http call ” ,basically how an API call works

First lets configure our component

import { Component } from ‘@angular/core’;
import { Http, Response } from ‘@angular/http’;

//including dependencies for catch and map
import ‘rxjs/add/operator/catch’;
import ‘rxjs/add/operator/map’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
public ajaxdata;
constructor (private http: Http) {
this.ajaxdata = {}; //a simple variable to bind API data to HTML
}


callApi() {
return this.http.get(‘https://jsonplaceholder.typicode.com/posts/1')
.map(res => res.json()); //return as JSON
}

fetchApi() { //function for subscribing the data
this.callApi()
.subscribe(
data => this.handleData(data),
err => this.handleError(err),

);
}

handleData(data){
console.log(data);
this.ajaxdata = data.body; //ajaxdata , variable to hold the API repsonseand binding it o the html

console.log(this.ajaxdata);

}
handleError(data){
console.log(data);
}
}

Lets see out HTML

<button (click)=”fetchApi()”>Call API </button>
<div>Server response</div>
<div id =”titledata”>{{ajaxdata}}</div>

So the functionality is simple and clean on click of the “Call API ” button , we will get the response :)

Testing this $http call using Jasmine

In our appcomponent.spec.ts ,include all the required libraries

import { TestBed, async, inject } from ‘@angular/core/testing’;
import {
HttpModule,
Http,
Response,
ResponseOptions,
XHRBackend
} from ‘@angular/http’;
import { MockBackend } from ‘@angular/http/testing’;

import { AppComponent } from ‘./app.component’;

Now we have to configure our TestBed ,we use MockBackend for testing $http calls

The beforeEach section ,we have to include MockBackend

beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [HttpModule],

declarations: [
AppComponent
],
providers:[
AppComponent,
{ provide: XHRBackend, useClass: MockBackend },
],
}).compileComponents();

}));

Now lets write our test case

it(‘should return a mock API’,
inject([AppComponent, XHRBackend], (app, xhr) => {

const mockResponse = {
body:”body from mock”
};

xhr.connections.subscribe((connection) => {
connection.mockRespond(new Response(new ResponseOptions({
body:JSON.stringify(mockResponse)
})));
});

app.callApi().subscribe((response) => {
expect(response).toEqual(
{
body:”body from mock”
}
);
//call the handle function in component ,check for the console.log() messages inside the handleData function
app.handleData({
body:”body from mock”
});
});

}));

So…

Unni Krishnan D

Just another geek

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store