DEV Community: Munni

Redux Tool-Kit

Munni — Fri, 04 Mar 2022 13:13:47 +0000

Redux Toolkit

Redux Toolkit exports several individual functions that you can use in your application, and adds dependencies on some other packages that are commonly used with Redux (like Reselect and Redux-Thunk). This lets you decide how to use these in your own application, whether it be a brand new project or updating a large existing app.

Store Setup

Every Redux app needs to configure and create a Redux store. This usually involves several steps:

•

Importing or creating the root reducer function -Setting up middleware, likely including at least one middleware to handle asynchronous logic
Configuring the redux dev Extension.
Possibly altering some of the logic based on whether the application is being built for development or production

Store Setup With ConfigureStore

Having an options object with "named" parameters, which can be easier to read
Enabling the Redux DevTools Extension automatically
In addition configureStore adds some middleware by default, each with a specific goal:
Redux Thunk is the most commonly used middleware for working with both synchronous and async logic outside of components
In development, middleware that check for common mistakes like mutating the state or using non-serializable values.

Creating Slice of state

Redux state is typically organized into "slices", defined by the reducers that are passed to combineReducer:

`Import {combine}
import { combineReducers } from 'redux'
import usersReducer from '
import postsReducer from '

const rootReducer = combineReducers({
users: usersReducer,
posts: postsReducer,
})`

Redux Toolkit

Munni — Fri, 25 Feb 2022 14:27:39 +0000

Redux

Redux is an open-source JavaScript library for managing and centrailizing application state. It most commonly used with libraries such as react or anguler for building user interfaces.A popular state management library. Redux helps you write application that behave consisitently, run in different environment and are easy to test.

Redux Toolkit

The Redux Toolkit package was developed to be the new standard way to write Redux code, handling some major concerns about Redux itself. One important thing to take away is that Redux Toolkit provides us with powerful data fetching and caching capability.

Using redux toolkit was originally created to help address three mejor concerns about Redux:

Configuring a Redux store is too complicated.
I have to add a lot of packages to get Redux to do anything useful.
Redux requires too much boilerplate code.

What’s include Redux Toolkit

configureStore()

It can automatically combine your slice reducers , adds whatever redux middleware you supply includes redux-thunk by default and enables use of the redux extention.

createReducer()

Reducer support directly mapping specific action types to case reducer function that will update the state when that actionnis dispatched.

createAction()

Redux Toolkit provides a function called createAction. Which simply generates action creator that uses the giveb action type , and turns its argument into the payload.

createSlice()

createSlice is a higher order function that accepts an initial state, an object full reducer function and slice name. it automatically generates action creators and action types that corresponding the reducers and state.

createSelector()

selectors typically expect the Redux state object as an argument , while slice reducers only have access to specific subset of the entire Redux state.

Installation

Redux Toolkit Npm An Existing app.

npm install @reduxjs/toolkit

Node JS

Munni — Thu, 23 Dec 2021 15:11:39 +0000

JWT

JWT means JSON Web Token. Its used to share secretly information between to parties client and server.JWT use as a secure way to authentication share user information. JWT mechanism to verify the owner of JSON.

How JWT Token Work?

JWT token based authentication, and its stateless. That means the user state is never saved in server memory but the state is sorted inside the token . JWT request to other parties.

JWT have of 3 parts .

Header
Payload
Signature

JWT Look Likes

Aaaaaaaaaa.bbbbbbbbbbbbb.cccccccccccc
The first part is header and second part is payload and the last part is signature.

Mongoose

Mongoose is a mongodb ODM (object database modeling). Mongoose is a way to make connection mongodb database. It provide mongodb validation. Its very simple and it make development first. And it includes query , validation, and logic hook.

It work in asynchronous environment .

Installation mongoose :
npm install mongoose

CRUD Operation

Crud are the four basic operation its create , read, update, delete. The crud operation is refers to the major operation which are implement by database. It can also describe the user interface convention that allow searching , modifying .

Create
The create function allows to user record create in the database. The create function is called INSERT.

Read
The read function is search specific function and read there value.

Update
The update function is modify existing record that exist in database.

Delete
The delete function allows user to remove record in the database.

Express of Node JS

Express js is a back end web application framework for node js. It’s a free and open source .
It designed for building web application and API.

Following are some of the core feature of express framework:
• Respond HTTP request
• Allows the middleware
• Allows to dynamically render to HTML pages.

Installation command :
npm install express

Example:
const express= require(“express”);
const app = express();

React React-Life-Cycle

Munni — Wed, 22 Dec 2021 16:46:41 +0000

``React web app are actually a collection of component. Every react component has own lifecycle, that are different stage of component extention.

A react component has four stage of lifecycle.
For example:

Initialization:
It’s a starting point of stage.Here the component start his journey. This is the stage where the developer initial state and props .

Its following method is bellow:

getDefaultProps()
 its used to specify the default value of this.props.

getInitialState() 
its used to specify the default value of this.state.

Mounting:
Mounting phase is instance of component is created and inserted into the dom. In this phase our component render at the first time. Mounting represent of the rendering component.

The method is available phase is:

**componentWillMount();
This function get invoked before the render function is executed for the first time.

componentDidMount();
This function get invoked ones after the render function is executed for the first time .

Updating:
The next phase is Updating. A component is update , when there is a change props or state in the component. The phase is updating some user event instruction.

There are some available method in updating phase:

setState():
This function is used to update the state of a component.

shouldComponentUpdate():
This function is invoked before rendering mounted component when new props or state being recieaved.

componentWillUpdate():
This function is invoked before the component rendered.

componentDidUpdate()
Similarly this function is invoked after the component rendered and update props or state.

UnMounting
This is the final stage of phase in react lifecycle. Where the component remove from the page.

This Unmounting phase following the method is:

componentWillUnMount():
The function get invoked before the remove component from the page. And its end of lifecyle.

*React JSX
*
JSX means JavaScript Syntax Extension. Its referred JavaScript as XML. JSX is a react extension to the JavaScript language. It produce react element. JSX allows to use write HTML directly in JavaScript react.

Example:

const function=()=>{

return(

# Header

Jsx

)

}