What is Redux? Why use Redux? When use Redux?

Why use Redux?

1.  Redux helps us to avoid the problem of prop drilling!
2. Instead of asking data to parent components, you can directly get that from the store.
3. Create Big apps with Redux if your app shares a lot of data between components you should use Redux.
4. Store, Reducers, Actions, Constants
5. Data can be separated using `Multiple reducers` & will be stored in a single Store.
6. in Index.js import Provider & Store. And then Wrap <App /> component with Provider.

Redux Devtools Extension.

1. To view states in our dev tools. you can see state movements. 
2. you have to add/connect your app redux dev tools extension.
3. const store = createStore(rootReducer, composeWithDevTools());

Add to Cart Example:

1.  What is Action: Send data from React to Store. if you click on the `Add to cart` button data will be shown to the cart.
2.  Reducer:  Gets data from action & pushes data to store. check for the action & push data accordingly!
3. container: 
4. Connect React with Redux: (mapStateToProps & mapDispatchToProps)
1. Shopping Types
2. Shopping Actions
3. Shopping Reducers
5. Get to know about Connect function in Redux.

Amazed:

1. By just adding `+`  before `action.payload.qty` type `string` value has been converted to type `number`

console.log("action.payload.qty ===> ", action.payload, " type ===>", typeof +action.payload.qty)

Read More

Hoisting In JavaScript

1. Before saying anything checkout the below example.
   
   
   var x = 8;

   
   

   function getName(){

       console.log('My name in Rahul More');

   }

   getName();

   console.log(x)
   
   
2. What do you think is the output of the above code?
   
   
   
   
   
   Yes, you guess that right. you will get output as you guessed it right.
3. But here is a trick. what if we do something like this?
   
   
   getName();

   console.log(x)

   
   

   var x = 8;

   
   

   function getName(){

       console.log('My name in Rahul More');

   }
   
   
   
4. Now can you guess what the will be the output?
   
   
   
   
   It's running Function getName but we got `undefined` for x
5. But if we remove `x = 8` from we will get an error that `x is not defined`.

Undefined Vs Not Defined

1. Accessing variables & functions before declaring is known as Hoisting in JS.
2. the function is working as it is even if we moved that at TOP but Variable is not working properly.
3. Even before executing the code memory got allocated for variables, functions for other things.
4. 
   

Read More

Asynchronous JavaScript & Event Loop

1. Javascript is a Synchronous single-threaded language. it can do 1 thing at a time.
2. Call stack present in the JS engine all code executes in the call stack.
   
   
   
   function a(){

       console.log('I am a()');

   }

   a();

   console.log('End')
   
   
3. Whenever the js engine runs the code it runs from top to bottom. it runs line by line.
1. Function a will be allocated memory & will be stored in call stack.
2. a() will be pushed at a call stack & function a is executed. after executing a will be popped out from the call stack.
3. And so on...
   
   
   

WEB API's

1. setTimeOut()
2. DOM API'S ( document.getElementByID() )
3. fetch
4. localStorage
5. console
6. location

These are not part of javascript, These are part of Browser. WEB API's present in the global object window.

window.console.log('Rahul More')

We can even write like this to get an appropriate output. but we don't have to write `window` each time because it's present in Global Object. so we can write it as 

console.log('Rahul More')

Example

console.log('start');

setTimeout(function cb() {

    console.log('Callback')

}, 5000);

// this will go to callstack after 5 seconds as we

// have passed this delay! Through the call back queue.

console.log('end');

The above code can generate output like this

Event Loop & Callback

1. Callback goes the call stack through the callback queue.
   
   
   
   
   
2. The event loop continuously checks in Callback QUEUE for callback & adds it to the call stack.

Call Back Queues

1. A lot of calls back stored in CB queues & pushed into call stack one by one using an event loop.

Micro stack Queues.

1. Fetch API.
1. Fetch API doesn't work like other web APIs like setTimeOut(), DOM APIs, instead of fetch APIs go inside Micro stack Queue.
2. It is like call back queue But has a higher priority than Call Back queue as you can see that in the image.

What comes inside Micro Stack Queues

1. Promises
2. Mutation Observer.

What comes inside Micro Stack Queues

1. SetTimeOut
2. DOM API'S.

Starvation.

1. Suppose there are a lot of tasks in the Micro stack queue & one task is creating another task in the Micro stack queue then the task in the callback queue will not get a chance to execute because of priority reasons.
2. This is known as starvation. starvation of the tasks inside the callback queues.

Read More