DEV Community: Ravi Sharma

Reset Final Cut Pro & Logic Pro

Ravi Sharma — Fri, 18 Feb 2022 22:47:21 +0000

have you paid for final cut pro and logic pro ? Use this trick...

https://youtu.be/SD8GCIe36eI

This video made for educational purpose only.

Big Collection of free resources for product developer and designers

Ravi Sharma — Sun, 16 Jan 2022 21:42:14 +0000

DevAssist

One of the best website found in 2022, where you will get all the free resources for you project development.

100+ best website collection at one place.

No need to google every-time just bookmark this one website.

https://www.devassist.in/

onPress on react native view component

Ravi Sharma — Tue, 11 Jan 2022 21:13:49 +0000

Hey Everyone,

In react native Generally we are using touchable opacity or other touchable component and wrap the View component as Child then we set click event on View but no need to use additional Touchable component to make view clickable, instead of it you can use other props that i have described in this video. you can use other View props like:
onStartShouldSetResponder, onResponderRelease, onResponderGrant, onResponderMove or Pressable api of react native.

You can watch this video in which i have explained how to use all of them to set onPress on react native view component.

https://youtu.be/YMyzKr3hoII

If you are interested to learn react native, ReactJS, NodeJS then subscribe my channel "JavaScript Centric" where, daily I am uploading interesting videos on different topics.

Link:
https://www.youtube.com/c/JavaScriptCentric

React Native Folder Structure 2022

Ravi Sharma — Mon, 10 Jan 2022 15:08:41 +0000

Here I am sharing my knowledge about react native folder structure.

https://youtu.be/LZXjVPn45A8

In this video I explained 3 different folder structure for your react native project. I have shared the best react-native folder structure that I've been using for my react native projects.

For react native projects and videos you can subscribe my youtube channel "JavaScript Centric"

https://www.youtube.com/c/JavaScriptCentric

React Native Roadmap 2022

Ravi Sharma — Sun, 09 Jan 2022 15:49:50 +0000

Hell everyone,
If you are interested to learn mobile development using react native then you can watch my upcoming videos on react native.

I am sharing react native roadmap 2022 where I have explained topics that I will cover in my upcoming videos. So please watch the given video and if interested then subscribe my channel. I will cover all the topics from basic to advance. Also we will build different react native project and deploy on google play store..

https://youtu.be/-_3kT_OV6Vs

Link of my youtube channel “JavaScript Centric”-
https://www.youtube.com/c/JavaScriptCentric

JavaScript Roadmap 2022

Ravi Sharma — Thu, 06 Jan 2022 14:56:02 +0000

If you want to start learning javascript in 2022, then you can follow this javascript roadmap. I have added all important topics that you can cover.
JavaScript Learning Path 2022..

Link

https://youtu.be/2PVFdxmz678

Basics of Redux Toolkit

Ravi Sharma — Wed, 05 Jan 2022 16:29:57 +0000

What is Redux ?

Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces

What is Redux Toolkit ?

Redux Toolkit (RTK), previously known as Redux Starter Kit, provides some options to configure the global store and create both actions and reducers in a more streamlined manner. Redux toolkit includes all the tools, you want for a Redux application.

By using this, you can write all the code you need for your Redux store in a single file, including actions and reducers. Using this you can make your code more readable.

Why Redux Toolkit 🤷‍♂️?

Redux Toolkit is mainly created to solve the three major issues with Redux:

Configuring a Redux store is too complicated: Redux Toolkit offers configureStore function to simplify configuration.
Need to add lots of packages: Redux Toolkit reduces the need to add multiple packages to build large scale application
Too much boilerplate code: Redux requires too much boilerplate code which makes it cumbersome to write efficient and clean code. Redux Toolkit helps to reduce boilerplate code.

Redux Toolkit comes pre-bundled with the below features:

immer.js => a library/tool to handle immutability in stores.
redux => For state management
redux-thunk =>For async tasks
reselect => For selecting a slice out of global store
automatic support for Redux Dev-tools Extension

Start with Redux Toolkit

You will need to include Redux as well as the react-redux binding package for it to work properly with React. You’ll also need the Redux Toolkit itself.

npm i redux react-redux @reduxjs/toolkit

Usually, you would also need the Redux DevTools extensions in order to debug your store mutations correctly; but since you’re using RTK, those are already included.

Important Terms Used In Redux Toolkit

1.Store
2.createSlice
3.name
4.initialState
5.reducers
6.extraReducers
7.createReducer
8.createAction
9.createAsyncThunk
10.createEntityAdapter
11.createSelector

Creating store

In traditional Redux, you had to call createStore using the main reducer as a parameter. The way to do it with RTK is to call configureStore, which allows you to do the same.

import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
import logger from 'redux-logger'

import usersReducer from "./slices/userSlice";
import postsReducer from "./slices/postSlice";

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

const preloadedState = {
  postsData: [
    {
      text: 'JavaScript Centric',
      completed: true,
    },
    {
      text: 'Lucky Gamer',
      completed: false,
    },
  ]
}

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
  devTools: process.env.NODE_ENV !== "production",
  preloadedState,
  enhancers: [reduxBatch],
});

export default store;

Here configureStore has five parameters(reducer, middleware, devtools, preloadedState, enhancers).

reducer is a single function, it will be directly used as the root reducer for the store. If it is an object of slice reducers, like {users : usersReducer, posts : postsReducer}, configureStore will automatically create the root reducer by passing this object to the Redux combineReducers utility.

middleware is an optional array of Redux middleware functions. If this option is provided, it should contain all the middleware functions you want added to the store. configureStore will automatically pass those to applyMiddleware.

devTools has default boolean value of true and will be used to indicate whether configureStore should automatically enable support for the Redux DevTools browser extension. If it is an object, then the DevTools Extension will be enabled, and the options object will be passed to composeWithDevtools().

preloadedState is an optional initial state value to be passed to the Redux createStore function.

enhancers is an optional array of Redux store enhancers, or a callback function to customize the array of enhancers. Example: enhancers: [offline] will result in a final setup of [applyMiddleware, offline, devToolsExtension].

createSlice:

createSlice is a higher order function that accepts an initial state, an Object full of reducer functions, and a slice name, and returns a single reducer along with the action creators for that reducer. (Automatically generates action creators and action types that correspond to the reducers and state).

We can Import the createSlice method from the redux-toolkit library.

import { createSlice } from '@reduxjs/toolkit'
const initialState: {
        users: []
    }

const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        getUsers: (state, action) => {
            state.users = action.payload;
        }

    },
});

export const { getUsers } = userSlice.actions;
export default userSlice.reducer;

createSlice looks at all the functions that are defined in the reducers field and for every case generates an action creator that uses the name of the reducer as the action type itself.

initialState value for this slice of state.

name a string name for this slice of state. Generated action type constants will use this as a prefix.

reducers is an object containing Redux "case reducer" functions. The keys in the object will be used to generate string action type constants, and these will show up in the Redux DevTools Extension when they are dispatched.

createAction

is a simple helper function that accepts an action type (string) and returns an action creator. The usual way to define an action in Redux is to separately declare an action type constant and an action creator function for constructing actions of that type.

createReducer

is a function that accepts an object where the keys are the action type and the values are the reducer.

import { createAction, createReducer } from '@reduxjs/toolkit'

const increment = createAction('counter/increment')
const decrement = createAction('counter/decrement')

const counterReducer = createReducer(0, (builder) => {
  builder.addCase(increment, (state, action) => state + action.payload)
  builder.addCase(decrement, (state, action) => state - action.payload)
})

It supports two different forms of defining case reducers to handle actions: a "builder callback" notation and a "map object" notation. Both are equivalent, but the "builder callback" notation is preferred.

That builder provides addCase, addMatcher and addDefaultCase functions that may be called to define what actions this reducer will handle.

A callback that receives a builder object to define case reducers via calls to
builder.addCase(actionCreatorOrType, reducer).

All calls to builder.addCase must come before any calls to builder.addMatcher or builder.addDefaultCase.

Redux Toolkit React Counter App

Ravi Sharma — Fri, 19 Nov 2021 03:15:45 +0000

Hi, I'm Ravi. I'm an JavaScript Developer by profession and a Youtuber also, subscribe my channel JavaScript Centric If you are one of the lover of JavaScript.

In this post I will share the basic example of a Counter App implemented using react and redux toolkit.

Why use Redux Toolkit? 🤷‍♂️

Redux toolkit includes all the functions or "tools", you want for a Redux application. At the end of the day, less code and faster setups of Redux in every scenario.

Here's what the Official docs said :

These tools should be beneficial to all Redux users. Whether you're a brand new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, Redux Toolkit can help you make your Redux code better.

Create a react app

Create-react-app gives you a basic React app so don't have to setup React yourself.

npx create-react-app readuxtoolkit_app

Now we need to add react-redux and Redux Toolkit to this app:

npm install --save react-redux @reduxjs/toolkit

You can install react-bootstrap also:

npm install --save react-bootstrap

Folder Structure

We will be following this folder structure. Create two folders app and features inside src folder. Inside app folder create file store.js and inside features folder create two other folders coin and counter.

Steps To Follow

Create a Redux Store
Provide the Redux Store to React Main App.js
Create a Redux State Slice
Add Slice Reducers to the Store
Use Redux State and Actions in React Component
To use redux state in other component use useSelector hook from react-redux

1.First Step is to configure our Store, now this is where you'll see the magic of redux toolkit! Now your redux store src/app/store.js will contains

import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {

  },
})

Here configureStore({}) wraps createStore to provide simplified configuration options and good defaults. It can automatically combine your slice reducers, adds whatever Redux middleware you supply, includes redux-thunk by default, and enables use of the Redux DevTools Extension.

2.Now we need to connect our store to our app or just wrap it with Redux. Import store.js and Provider from react-redux into src/index.js

import { store } from "./app/store";
import { Provider } from "react-redux";

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

Now start your application with npm start and open up Redux DevTools, you should see @@init. Congrats you have setup Redux with React!! 🥳️

3.Third Step is to create a counterSlice.js file inside features/counter folder.

import { createSlice } from '@reduxjs/toolkit'

const initialStateValues = {
  coin: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState: initialStateValues,
  reducers: {
    increment: (state) => {
      state.coin += 1
    },
    decrement: (state) => {
      state.coin -= 1
    },
    incrementByAmount: (state, action) => {
      state.coin += action.payload
    },
    decrementByAmount: (state, action) => {
      state.coin -=action.payload
    }
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount, decrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Basically createSlice accepts an object of reducer functions, a slice name( in our case slice name is 'counter') and an initialState(here initialStateValues that contains coin) and automatically generates a slice reducer with corresponding action creators and action types.

4.Fourth Step is to Add Slice Reducers to the Store. So update store.js will look like below:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
      counter: counterReducer
  },
})

In case if you are using other reduces than you have to use combineReducers from redux as below:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer1 from "./../features/counter/counterSlice1";
import counterReducer2 from "./../features/counter/counterSlice2";

import { combineReducers } from "redux";

const reducer = combineReducers({
  // put all your reducers here!
  counterReducer1,
  counterReducer2,
});

export const store = configureStore({
  reducer,
});

5.To use actions in other component we have to use useDispatch() provided by "react-redux" and used to dispatch our actions like

const dispatch = useDispatch();
now call dispatch action by passing action name inside it.
In features/counter/Counter.js we are using different actions like (increment, decrement, incrementByAmount, decrementByAmount).

import { useDispatch } from "react-redux";
import {
  increment,
  decrement,
  incrementByAmount,
  decrementByAmount,
} from "./counterSlice";
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';

const Counter = () => {
  const dispatch = useDispatch();
  return (
    <div>
      <hr />
      <Button
        aria-label="Increment value"
        onClick={() => {
          dispatch(increment());
        }}
        variant="success"
        className="mx-2"
      >
        Increase
      </Button>

      <Button
        className="button"
        aria-label="Decrement value"
        onClick={() => {
          dispatch(decrement());
        }}
        variant="danger"
        className="mx-2"
      >
        Decrease
      </Button>

      <Button
        className="button"
        aria-label="Decrement value"
        onClick={() => {
          dispatch(incrementByAmount(10));
        }}
        variant="success"
        className="mx-2"
      >
        IncrementBy 10
      </Button>

      <Button
        className="button"
        aria-label="Decrement value"
        onClick={() => {
          dispatch(decrementByAmount(10));
        }}
        variant="danger"
        className="mx-2"
      >
        DecrementBy 10
      </Button>
    </div>
  );
};
export default Counter;

6.To use redux state in other component use useSelector hook from react-redux like in features/coin/Coin.js.

Remember the name of our reducer we imported in counterSlice.js, that's the name we have to use when using the useSelector() hook.

It receives our state in arguments and then we can extract every other variable in our state with the help of destructuring like below.

import {useSelector} from 'react-redux';
const Coin = () => {
  const {coin} = useSelector((state)=>state.counter);
  return (
    <div style={{paddingTop: '200px'}}>
      <b><big className="value">Coins: {coin}</big></b>
    </div>
  );
};

export default Coin;

Now in your Terminal, to start your React app:

npm start

Congrats you made it! 🥳️

You have setup React and Redux Toolkit! There are obviously many complex use cases of Redux which I will cover in the upcoming post.

Subscribe to my youtube channel: JavaScript Centric

Like ❤️ and Share 🙏🏻 if you found this post helpful.

Free Course For Everyone To Download Or Watch

Ravi Sharma — Fri, 12 Nov 2021 14:30:27 +0000

Here I am providing list of websites where you can download many paid courses for free or watch online.

Please save and like and share with others.

Website For Free Downloads

freecoursesonline
Free Courses Online Free Download Torrent of Phlearn, Pluralsight, Lynda, CBTNuggets, Laracasts, Coursera, Linkedin, Teamtreehouse etc.
getfreecourses
Download Udemy Paid Courses for Free. Learn Hacking, Programming, IT & Software, Marketing, Music, Free Online Courses, and more. Active site to upload udemy courses.
tutorialsplanet
Download Udemy Paid Courses for Free. Learn Hacking, Programming, IT & Software, Marketing, Music, Free Online Courses, and more. Active site to upload udemy courses.
desirecourse
Download Udemy Paid Courses for Free. Learn Hacking, Programming, IT & Software, Marketing, Music, Free Online Courses, and more. Active site to upload udemy courses.
freecoursesite
Download Udemy Paid Courses for Free. Learn Hacking, Programming, IT & Software, Marketing, Music, Free Online Courses, and more. Active site to upload udemy courses.
courseclub
Download Free Courses Online of Phlearn, Pluralsight, Lynda, CBTNuggets etc. Everything is Full And Free For Download And Many More.
online-courses
Watch and Learn. Educate yourself!

Remove all console log in single click.

Ravi Sharma — Mon, 23 Aug 2021 13:32:46 +0000

There is no problem to use console.log at development level for logging or to debug your app but what if you forget to remove console log and push your code for review or for production.

definitely it will impact your app performance and will make your app slow and also less secure.

So how you can remove all console.log from your code in single click ??
Interested ? So lets go to ——> https://youtu.be/UYKbSPMTfZY

How to create google service account ????

Ravi Sharma — Sat, 21 Aug 2021 19:54:33 +0000

Watch one of the basic video on GCP Certification Preparation series: https://youtu.be/VkoqhOFTV2I

7 Different Ways To Create Objects In Javascript 2022

Ravi Sharma — Mon, 02 Aug 2021 12:30:11 +0000

Watch this video if you don't know
https://youtu.be/HRP-5MS9DkQ