In actuality, Redux in its bare form is quite simple and easy to understand. But one of the most popular and enduring critiques is the amount of code Redux adds to the app, which many feel is unnecessary. To overcome this the Redux team has put a huge amount of effort into this and without a doubt has produced a remarkable result with Redux Toolkit.

But Recently Redux Team launched Redux Toolkit, an officially recommended and a SOPE library that stands for Simple, Opinionated, Powerful, and Effective state management library. It allows us to write more efficient code, speed up…


Interview Questions?

Q. You might have a form created in your React App that user might try to close by closing the tab, reloading the page or close the browser directly without saving the data (or submitting the form). You might want to prompt the user in this case to alert them that there might be unsaved changes that might be lost.

How to do that in React ?

Answer @ https://inthetechpit.com/2020/05/19/prompt-user-with-beforeunload-on-browser-tab-close-react-app/

Q. You have a form…in one child component C1…you want to fetch only input type=”text” elements, in 2nd child component C2…you want to fetch only radio elements… in…


If you have built a React app at any point in your programming career, you probably have experienced an error at some point that was cryptic and did not provide any meaningful context on what actually happened.

That meant error occured at some point in the application and our React component did not handle the error gracefully.

A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.

try/catch only works for imperative code, but React components are declarative.

Since…


📄 Table of contents

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬✦✦✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Introduction

  • TypeScript has strict type checking.
  • TypeScript is object oriented JavaScript. TypeScript supports object-oriented programming features like interfaces, classes, etc.
  • TypeScript files(.ts) on compilation produce JavaScript files(.js) with the same name.

interface and type
Function overlaoading
OOPS Concept
Anonymous
undefined error
decode and encode URI
escape and un escape function'
unshift position in Java script
Screen Obects in Java Script
Event handlers in Java Script
Event bubbling
Redux v/s Flux
Components of Redux
What is redux
Role of reducer
Fragment - what is the signifance
Higher order Compoenent
Pure compoenent
Mounting, Unmount, Constructor
Render method on React
When it is invoked .. what result will it give - render
state and stateless components
Redux - what is it ? …

Action Type

An action type is a string that simply describes the type of an action. They’re commonly stored as constants or collected in enumerations to help reduce typos and because programmers love organization. I’ve found it helpful to structure my action types like this:

export const Actions = {  GET_USER_DETAILS_REQUEST: 'GET_USER_DETAILS_REQUEST',  GET_USER_DETAILS_SUCCESS: 'GET_USER_DETAILS_SUCCESS',  GET_USER_DETAILS_FAILURE: 'GET_USER_DETAILS_FAILURE',  UPDATE_USER_DETAILS_REQUEST: 'UPDATE_USER_DETAILS_REQUEST',  UPDATE_USER_DETAILS_SUCCESS: 'UPDATE_USER_DETAILS_SUCCESS',  UPDATE_USER_DETAILS_FAILURE: 'UPDATE_USER_DETAILS_FAILURE',  // more...
};

Action

An action is like a message that we send (i.e. dispatch) to our central Redux store. It can literally be anything. But ideally we want to stick to an agreed-upon pattern. …


📄 Table of Contents

▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

◉ Closures

A Closure is a named or anonymous function defined within the context of an object or any other function, which preserves and access to the context where it was declared.

In JS, variables defined outside a function are automatically available inside the function (but NOT vice versa) because JS uses “Lexical Scoping” & it achieves so using Closures (or inner functions).

  • In JavaScript, all functions work like closures which literally means closures are created every time a function is created, at…

📄 Table of Contents

▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Introduction

In simple word, A polyfill is a piece of javascript code which provide native support to the older browsers who does NOT have the support of modern functionalities of javascript.

In ECMAScript 2015, there are many new Array methods has been added to manipulate an arrays in a simple and easy way. Here we are trying to create polyfills for .forEach(), .map() and .filter() methods.

Prior to writting polyfills, let’ s understand how to write callback functions?

How to write callback functions

A callback function is a function


Objects are reference types, so you can’t use your normal equality operators, i.e. == or ===. as you use for comparison of primitives.

As the name suggests JSON.stringify() converts objects to strings first and comparison takes place afterward.

JSON.stringify({ a: 1, b: 2}) === "{"a":1,"b":2}"

JSON.stringify({ b: 2, a: 1}) === "{"b":2,"a":1}"

For JSON. stringify() , the order matters.

So if the key-value pair are ordered differently in the two objects but are the same, it will return false. Whereas it doesn’t matter in Lodash isEqual , it will return true as along as the key-value pair exists.

Also, it…


While it is technically possible to alter state by writing to this.state directly, it will not lead to the Component re-rendering with new data, and generally lead to state inconsistency.

Three Rules of Thumb When Using setState( )

Do Not Modify State Directly

State Updates May Be Asynchronous

React may batch multiple setState() calls into a single update for performance.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

Anil Kumar

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

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