Forem: Riyad Mahmud

# Redux #Its Concepts and #Why Redux?

Riyad Mahmud — Wed, 15 Dec 2021 14:38:21 +0000

Redux
Redux is a predictable state container for js apps. Its a state management library.

# Importancy:

- For js apps:
   - Can be used React, Angular, Vue or even vanilla js

- A state container:
   -  Redux stores the state of an application
   -  Consider a React App state of a component
   -  State of an app is the represented by all the individual components of that app
   -  Redux will store and manage the application state.
   -  A state container for js app  

- Predictable

Why Redux?

Can Manage the state of your application in a predictable way, redux can help you.
Lifting a state up for far component is not better solution because component tree grows long. We can
solve this problem by storing state with Redux.
State is controlled outside the components and if a component need to update its state need to

communicates with the state container.

*Redux will be used opposite of useContext() and useReducer() *

Three Core Concepts of Redux

Store => A "store" that holds the state of a application.
Action => An "action" that describes the changes on the state of the application.
Reducer => A "reducer" which actually carries out the state transition depending on action.

These three concepts contains three principle of Redux:
- First Principle: The state of your application is stored in an object three within a single store. Maintain our application state in a single object which would be managed by the Redux store.
- Second Principle:
  The only way to change the state is to emit an action, an object describing what happened.
  
  To update the state of your app, you need to let Redux know about that with an action.
  Not allowed to directly update the state object.
- Third Principle:
  
  To specify how the state tree is transformed by actions, you write pure reducers.
  
  Reducer = (prevState, action) => newState

Why we use useEffect? and useEffect Hook more general knowledges

Riyad Mahmud — Mon, 08 Nov 2021 19:31:52 +0000

Why we use useEffect?

-----------------------------------------------

Ans:
We use useEffect when we need to handle "side works/side effects" of related state. It happens after component rendering. Good Example,
See the axios api here, we use this external api axios and its code in useEffect hook function.

Don't forget these,

side works = side-effects.
"axios" is an external api.
"useEffect" related to passing response for side-effects after rendering component.
"dependency" of useEffect make sure that application side-effect need to act for given depency.

useEffect Hook more general knowledges

-----------------------------------------------

Perform side effects in function components.
- Using Effect
- Data Fetching
- Manually changing the DOM
- API Calling
- Managing the outside world data
- Timer setting
- Replacement of - componentDidMount(), - componentDidUpdate(), - componentDidUnmount()
useEffect(callback, [dependencies array]) is the hook that manages the side-effects in functional components.
- Callback argument is a function to put the side-effect logic.
- Dependencies is a list of dependencies of your side-effect:
  - If we don’t pass dependency variable then useEffect hook will only called when our component is rendered.
  - If we pass an empty array to useEffect then our component will be rendered for first time when a component is rendered. To re-call useEffect hook we have to refresh our page.
  - If we pass dependencies to useEffect hook, then useEffect will executed every time passed variable data is updated.
useEffect will run after every render.
Need to Use multiple useEffect for explaining multiple effects.

-----------------------------------------------

Best of Luck all of you.....

Thanks to my loving teachers,
Sumit Saha, HM Nayem, Vishwash, Anisul Islam, Rabbil Hasan Rupom

Why useState??? and Some important basic things of React useState Hook,I have noticed....

Riyad Mahmud — Mon, 08 Nov 2021 19:21:57 +0000

-----------------------------------------------

"useState" related to taking/getting a state and updatingState function for any updating state. Ex: const [count,setCount] = useState(0);
We can use any "premetive data" or "array object" for useState argument (argument not parameter)
"premetive data" is more preferable for beginner
"array object" is difficult to implement and understand the code for a beginner.
Implemented argument in useState function," "premetive data" or "array object" " return two this such an state and state updating function. Ex: const [count,setCount] = useState(0); //Here , "count" is a state and "setCount" is a state updating function. "0" is a premetive data.

-----------------------------------------------

Best of Luck all of you.....

Thanks to my loving teachers,
Sumit Saha, HM Nayem, Vishwash, Anisul Islam, Rabbil Hasan Rupom

DOM (Document Object Model) is really easy to understand!!!

Riyad Mahmud — Sun, 07 Nov 2021 16:30:03 +0000

1. What is DOM?

2. What is “D” “O” “M” for?

3. Is DOM same as HTML?

4. What is the relation between DOM and HTML?

Today, we will know 4 queries solution. These are above.
Lets learn...

DOM contains Document Object Model.

D for Document.
It Means: HTML doc file

O for Object.
It Means: HTML element(body,head,p,h1,etc) / javascript object)
We can say, HTML element(p,h1,etc) = javascript object.

M for Model.
It Means: HTML doc’s “element/ javascript object” Model

DOM works as a “javascript object model”. Here, “javascript object” is known as HTML element(p,h1,etc). Actually, DOM is an HTML element(p,h1) model.

Best of luck.