DEV Community: anjalyyy1

Setting up Redux using Redux Toolkit

anjalyyy1 — Sun, 12 Jun 2022 06:59:23 +0000

In this blog we saw how to set up a global store using redux and react-redux. It is fine if you did not read that blog, but to understand better what problems redux toolkit is solving, it is recommended to read the previous blog.

Redux toolkit was introduced to solve the following problems which were there in the traditional approach of using redux:

Setting up a Redux store was way too complicated
You had to add a lot of packages to have redux do something useful.
The developers had to write a lot of boilerplate code to just get started.
Understanding the flow of data from the react components to the redux store and vice-versa was overwhelming for newbies.
More code meant more surface area for bugs.

Let us now see how to setup redux with redux toolkit and how redux toolkit solves the above problems:

1. Install redux toolkit and react-redux
npm install @reduxjs/toolkit react-redux

We need @reduxjs/toolkit for the redux setup and react-redux so that react components and redux store could communicate.

2. Create a Redux Store
We will be creating two folders:

redux (files related to redux configuration)
store (files related to redux store)

Inside redux folder, we will create a file named createStore.js.

Inside this file, we use configureStore() for creating and configuring a store.

import { configureStore } from '@reduxjs/toolkit'

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

configureStore is a friendly abstraction over the standard Redux createStore function and adds good defaults to the store set up for a better development experience.

It enables the Redux DevTools Extension automatically for better debugging and visualizing our store. Previously we had to install a separate module and write some code for this extension to work. It also enables redux-thunk, the most commonly used middleware for working with both synchronous and async logic outside of components, out of the box.

2. Provide the Redux Store to React
At the root level of our project, we will create a file named AllProvider.jsx where we will wrap our with , so that the entire store is available for the react components.

import GlobalStyle from "styles";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "redux/createStore";

const AllProvider = () => {
  return (
    <Provider store={store}>
      <GlobalStyle />
      <App />
    </Provider>
  );
};

export default AllProvider;

3. Create a Redux State Slice:

Inside our store folder, we can create a folder named slices.
For our counter reducer, we will create a file counter.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

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

export default counterSlice.reducer;

This is the main file, which reduces the boilerplate to a great extent compared to the traditional approach. This is where the need to create action creators and types separately is no longer needed.

Redux state is typically organized into "slices". createSlice function will auto-generate the action types and action creators for us, based on the names of the reducer functions you provide. createSlice looks at all of the functions that are defined in the reducers field, and for every "case reducer" function provided, generates an action creator that uses the name of the reducer as the action type itself. Also now since immer library is in-built, we can get immutable updates with normal mutative code.

state.value += 1;

increment(1)
// {type : "counter/increment" }

4. Add Slice Reducers to the Store
Now, we need to import the reducer function from our counter slice and add it to our store.

import counterReducer from "store/slice/counter";
import { configureStore } from "@reduxjs/toolkit";

const rootReducer = {
  counter: counterReducer,
};

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

We kind of combine all our app reducers in the rootReducer object and pass it to configureStore(). As you can now see, the combineReducers() from the traditional approach is no longer needed now.

5.Using the actions and redux-store in our app

import { useDispatch, useSelector } from "react-redux";
import { increment, decrement } from "store/slice/counter";

const CounterComponent = () => {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);

  const incrementHandler = () => {
    dispatch(increment());
  };

  const decrementHandler = () => {
    dispatch(decrement());
  };

  return (
    <div>
      <button onClick={incrementHandler}>Increment by 1</button>
      <button onClick={decrementHandler}>Decrement by 1</button>
    </div>
  );
};

export default CounterComponent;

The actions exported from the slice can be dispatched and the store data for the counter reducer is available as counter (as the key in rootReducer)

Now, any time you click the "Increment by 1" and "Decrement by 1" buttons:

The corresponding Redux action will be dispatched to the store
The counter slice reducer will see the actions and update its state
The component will see the new state value from the store and re-render itself with the new data.

Now you know why has redux-toolkit become the recommended approach as it makes everything so easier and adds an abstraction over the things which should/could have been hidden.
Let me know if you have any questions in the comments below.

Happy coding!!!

Setting up Redux in your React App

anjalyyy1 — Mon, 30 May 2022 07:12:24 +0000

Redux helps us centralize and manage our app data globally without having to lift state to parent components and eliminates the problems of props drilling. Not every app needs to use redux, but as your app grows using redux is inevitable.

We now have redux-toolkit which has become the official recommendation for writing redux logic. To know the pros of using redux-toolkit, we should know the cons of using the traditional Redux code. Since redux-toolkit is just a layer of abstraction above the traditional code, we should know the underlying architecture of Redux, so that we can easily gauge the problems it solves.

Before using Redux Toolkit, let us understand how to set up/use redux using in a react app, and then in the upcoming blog, we will discuss how Redux toolkit reduces the boilerplate code and acts as an abstraction.

1. Initialize your react app:
Open a terminal and enter the following cmd to initialize your project with a predefined template

    $ npx create-react-app react-redux-demo

and then cd to your project directory and run

npm start

2. Install redux and react-redux:

React Redux lets your React components talk to Redux store, and send data(fancy word - dispatch actions) to the store so that it can be updated as per the action performed. Enter the following command to do so:

    npm install redux react-redux

3. Creating a redux store:

We will create two folders:

redux (files related to redux configuration)
store (files related to redux store)

Inside the redux folder, we will create a file createStore.ts.
Bare minimum createStore.ts file:

import rootReducer from "./reducers";
import { createStore } from "redux";

const store = createStore(rootReducer);
export { store };

We use createStore from redux to create a store for our app and export the store from thsi file.
The rootReducer used in this file will be discussed later.

4. Providing this store to our React app:

Now since we have the store ready, we need a way for our components to access it. We will use Provider from react-redux to do so.

At the root level of our app, we will create a file called AllProvider.tsx (this file acts as the wrapper for our react components)

import GlobalStyle from "styles";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "redux/createStore";

const AllProvider = () => {
  return (
    <Provider store={store}>
      <GlobalStyle />
      <App />
    </Provider>
  );
};

export default AllProvider;

Now since we have wrapped our App with the Provider, our app can communicate/access data stored in the redux store. Now let's try to figure out a way to put some data inside the store.

5. Putting data inside our store:

To create/update/delete data inside the store, we need to dispatch actions from React components and then based on the dispatched action we will perform some operations.

Dispatching actions
Let us consider an app for adding posts(not a very useful app though but does the work here).

We will create three folders inside our store folder:

types folder
In this folder, we will create a file called postTypes.ts

const ADD_POST = "ADD_POST";

export const PostTypes = {
  ADD_POST,
};

Here we define the types/use-cases which can be performed. We have created a type ADD_POST here so that this type can be used by the action creator when dispatching an action and this type can be used by the reducer to accept this as a case. We will use the same type constant in the reducers and actions file to avoid any typos.

actions folder
We will create a file called postActions.ts:

import { PostTypes } from "store/types/postTypes";

export const addPost = (post: any) => ({
  type: PostTypes.ADD_POST,
  post,
});

Here we create an action creator addPost which returns the action. (An action is simply an object that has two things: a type, and a payload. An action creator is simply a function, that just returns an action.) This is the function that will send data to our store.

reducers folder
This folder holds the traditional switch case statements to help us identify how the state will be updated based on the types:

import { PostTypes } from "store/types/postTypes";

const INITIAL_STATE: any[] = [];

const postReducer = (state = INITIAL_STATE, action: actionMapType) => {
  switch (action.type) {
    case PostTypes.ADD_POST: {
      const updatedState = [...state];
      updatedState.push(action.post);
      return updatedState;
    }
    default:
      return state;
  }
};

export default postReducer;

Now that we have the reducer ready, let's pass this reducer to our store. Remember we had used rootReducer while creating our store, now you know where that rootReducer came from, but still, there's a catch. In a real-world application, we never are going to have a single reducer(if this is the case please use component state instead). So for an app that has multiple reducers we will combine the reducers(yes literally combineReducers) as one and pass it to our store, like so:

Inside our redux folder, we will create a file called reducer.ts

import { combineReducers } from "redux";
import postReducer from "store/reducers/postReducer";

const rootReducer = combineReducers({
  posts: postReducer,
});

export default rootReducer;

export type RootState = ReturnType<typeof rootReducer>;

Voila, we have our redux store ready to give and receive data, using useSelector() (similar to mapStateToProps in class components) and useDispatch() (similar to mapDispatchToProps in class components) respectively. Let's have a look at how to do that and we will be good:

import { useDispatch } from "react-redux";
import { CanvasWrapper } from "./styles";
import { addPost } from "store/actions/postActions";
import { RootState } from "redux/reducers";

const Canvas = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state: RootState) => state.posts);

  const addPostHandler = () => {
    const newPost = {
      title: "Hello this is a post",
    };
    dispatch(addPost(newPost));
  };

  return (
    <CanvasWrapper>
      <button onClick={addPostHandler}>Add post</button>
    </CanvasWrapper>
  );
};

export default Canvas;

We dispatch addPost() to send a new post to the store and then the action goes to the reducer and the case which matches the type of the action is executed. We access the posts inside the store using useSelector(). The key name would be the same as we define in the combineReducers().

So this is how we connect redux with our react components using react-redux. The above code could be too much for newbies and might feel overwhelming, so we would in the next blog how redux-toolkit solves so many things for much and makes it easier to use redux.

Thanks and Happy Coding...

Critical Rendering Path(CRP)

anjalyyy1 — Sun, 22 May 2022 11:45:34 +0000

There are a lot of steps that the browser needs to run to show the initial view of any HTML page to the user. These steps together make what is known as Critical Rendering Path.
Remember, the critical rendering path is all about HTML, CSS, and Javascript. Even though we must try to get other resources(eg: images) shown as soon as possible, they are not going to block the initial rendering.

There are 5 steps involved in CRP:

Document Object Model(DOM)
CSS object model(CSSOM)
Render Tree
Layout
Paint.

Document Object Model(DOM)

Once the HTML of our page is parsed, an object-based representation of this is created which is known as a Document Object Model.
Consider this snippet:

<html>
  <head>
  <link rel="stylesheet" href="style.css">
  <title>101 Javascript Critical Rendering Path</title>
  <body>
    <header>
      <h1>The Rendering Path</h1>
      <p>Every step during the rendering of a HTML page, forms the path.</p>
    </header>
    <main>
         <h1>You need a dom tree</h1>
         <p>Have you ever come across the concepts behind a DOM Tree?</p>
    </main>
    <footer>
         <small>Thank you for reading!</small>
    </footer>
  </body> 
  </head>
</html>

This is what a DOM for the above snippet would look like:

The browser sends a request for the HTML and starts parsing it. The parser sends requests for any CSS links or Javascript, after that it also sends requests for all the other assets found in the rest of the page. When the HTML is wholly parsed, the browser now has all the content, but the browser needs to know the related CSS to show the HTML elements. Now the browser waits for the CSSOM, which will tell the browser how the elements should look when rendered.

CSS Object Model(CSSOM):

Just like a DOM is created so that the browser understands it, a CSSOM is created so that the browser understands it and the CSS rules are applied effectively.

Consider the CSS for the above HTML:

header{
   background-color: white;
   color: black;
}
p{
   font-weight:400;
}
h1{
   font-size:72px;
}
small{
   text-align:left
}

The CSSOM would look like:

CSS is a critical resource as it is render-blocking (the rendering is stalled until all the CSS resources are loaded). It is render-blocking because showing the HTML without the CSS will not serve a good user experience.

Render Tree:
This is the step when the DOM and CSSOM are merged, and together they can render the page.
This render tree has all the information about the content which has to be shown to the user as well as its respective styles(if available).

Layout:
This stage is where the browser calculates the positions and dimensions of each visible element on the page.
Whenever the render tree is updated or the size of the viewport changes, this step has to run all over again.

Painting:
In this step the layout created is painted by the browser. This step can take time based on the paint styles.

Check here to know more

Dealing with Javascript:
Since javascript can manipulate both DOM and CSSOM, the browser should wait for the DOM to be fully constructed and wait for the CSS files to be loaded and parsed completely.

Whenever the browser finds any javascript file, it stalls the HTML parsing and waits for the script to be executed to resume HTML parsing again. Therefore if there are any references of the DOM inside of the script, the script should run after the DOM construction. To deal with this, previously it was recommended to always have the script at the bottom of your body tag.

This approach has its own downsides: the browser cannot start downloading the scripts until the entire HTML is parsed. For larger websites with large scripts, being able to fetch the script as soon as possible is very crucial for performance.

To tackle this, the modern approach is to use async or defer for the script tags
async: the script will be fetched in parallel to parsing and executed as soon as it is available.
defer: the script will be fetched in parallel to parsing and executed once the entire document is loaded.

Both the attributes allow the elimination of parser-blocking JavaScript where the browser would have to load and evaluate scripts before continuing to parse.

Conclusion:
Now that we know what the critical rendering path is, we can try to analyze the code. Every line, every resource and every file included in the project adds to the critical rendering path. Performance is crucial in any web application. As it grows in complexity and size, every millisecond makes a difference. Nevertheless, remember that premature optimization can be catastrophic. Always make sure every optimization is worth the time and it brings a change.

Happy Coding!

Optional chaining in Javascript

anjalyyy1 — Sun, 08 May 2022 07:59:52 +0000

Optional chaining is a way to safely access nested properties without getting the nasty Uncaught TypeError: Cannot read property "something" of undefined.

Suppose, we have an object such as

const user = {
    name: "Chris",
    details: {
        age: 30,
        email: "chris@xyz.com",
    }
}

const userAge = user.details.age; // 30
const userStreet = user.details.address.street; // Error !!!

Accessing any property of a non-existent property will result in an error. We can easily resolve this error by having multiple checks like

const userAddress = user.details.address ? user.details.address.street : null;

This just gets uglier if there are more nested properties or if the top-level properties don't exist. I used to use lodash _.get to resolve this. But javascript has now given us optional chaining to overcome this without using any extra dependency. It just goes like this:

const userAddress = user.details.address?.street

The optional chaining ?. stops the evaluation if the value before ?. is undefined or null and returns undefined. This is much cleaner than what we had before. Also bear in mind that ?. just keeps the value optional before it and not after that. The properties after that are accessed regularly.

The optional chaining also works with square brackets and functions like so:

obj?.[prop] -> returns obj[prop] if obj exists, otherwise undefined.
obj.method?.() -> calls obj.method() if obj.method exists, otherwise returns undefined.

Absolute import for your React Typescript project

anjalyyy1 — Sun, 10 Apr 2022 09:35:57 +0000

Working on any project, one of the most annoying and confusing things has to be adding relative imports. It always creates confusion and is difficult to change whenever you ship your component to any other folder/component. We are always worried if it would break anything!!!. Absolute imports to the rescue...

So instead of importing files like ../../../components/header, with absolute imports we can import file like components/header and now we don’t care about the relative positions of the file. We only care about the position of the file relative to the root of the project.

Benefits:

Clean and maintainable code
Copy pasting imports to other components is a lot more easier.
Easily locate files when absolute imports are used.

For React projects created using typescript, we have a tsconfig.json file, where we just want to add:

{
  "compilerOptions": {
    ...
    "baseUrl": "src"
  },
  "include": ["src"]
}

Now restart your app to see the imports working for you. You can sometimes this error see the Cannot find module components/header, to resolve that you just have to restart VS Code, and that should do the work.

If the issue still persists, you can Open the settings(Ctrl + ,) > search for Import module specifier, under Typescript settings, change setting to auto or non-relative, VS Code will decide how the import has to be done based on your tsconfig.json file. You may need to restart the IDE again for this to take effect.

Let me know in the comments if this worked for you.

Thanks.

Javascript Nullish Coalescing operator(??)

anjalyyy1 — Sat, 19 Feb 2022 11:15:45 +0000

The nullish coalescing logical operator('??') in javascript returns its right-hand side operator when its left-hand side operator is either null or undefined.

const result = null ?? "string";
console.log(result); // logs hi foo

Can be also written as:

const result = (a !== null && a !== undefined) ? a : "string";

It is often confused with '||' operator which returns its right-hand side operator when the left-hand side operator is falsy

Here is a list of all the falsy values we have in javascript:

false (boolean)
0
"", '', ``,
undefined
null
NaN

Problem nullish coalescing operator solves:

The common use case for ?? is to provide a default value for a potentially undefined variable.

Suppose we want to check if a value exists or not, if it exists we want to assign that value or have a default value.

`
const response = {
isSing: true,
isDance: false
};

const isDance = response.isDance || true
`

We want the isDance variable to be whatever value comes from the response for isDance or have a default value of true if it does not exist. Now since response.isDance is false it will always be true. However our intention was to simply check if the isDance variable exists on the response object.

To solve this we can use nullish coalescing operator:

`
const response = {
isSing: true,
isDance: false
};

const isDance = response.isDance ?? true;
console.log(isDance); // false
`

It returns the default value only if the response.isDance results in undefined or null.

`
const response = {
isSing: true,
};

const isDance = response.isDance ?? true;
console.log(isDance); // true
`

Thanks.