redux toolkit

createReducer over traditional Reducer approach comparision

Passing a function as a prop to a functional component

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…

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
• migrate from .js to .ts
• Types vs Interfaces
• Interfaces
• Classes
• namespace
• Modules

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

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
• why to use Closures
• Disadvantages of using Closures in javascript
• Alternatives of Closures

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

◉ 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

• how to write a callback function
• Polyfills for .forEach(), .map() and .filter()

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

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…