## Authentication

Authentication is a process of verifying the user by proving his identity before allowing him to access a system. User proving his identity by providing his authentication factor.

Authentication factors usually are separated in 3 categories:

- Something what you know
- Something what you have
- Something who you are

**Something What You Know:** It requires a user to provide what they know. Usually, it will be a credentials that has a combination of his email/username and password.

**Something What You Have:** It requires a user to prove what they have. For example, a user need to provide an OTP which system already sent to user’s mobile phone number to prove that his mobile phone number is valid.

**Something Who You Are:** It requires a user to provide his physical characteristics e.g. fingerprint, face, and voice.

### Multi-Factor Authentication

When user authenticate with only using one factor (e.g using email and password), it’s called single-factor authentication. But user can also authenticate with multiple factor to increase the security. It’s called multi-factor authentication.

For example, when a user want to authenticate:

- He need to provide his email and password (*something what you know*).
- After that, he need to provide an OTP that already sent to his email (*something what you have*).

This will prevent attacker to authenticate easily. So even if he can pass the first factor by knowing user email and password, but he can’t pass the second factor because he can’t access the user email to get the OTP.

## Authorization

Authorization is a process of verifying the user permissions before allowing him to access a specific resources in the system. It ensures only authorized users that are allowed to access and operate the resources. Also, It protects the resources from unauthorized operations that can damage the company business. Usually, authorization process happens after the authentication process.

In an authorization process, it usually has 3 parts involved:

- Resource
- Permissions Giver
- Authorized User

Resource is something in the system that user want to access and operate. Permissions Giver is a user that can provide permissions for another user to access and operate specific resources. Authorized User is a user that are allowed to access and operate the resources.

For example, in this case:

User A gives User B permissions to allow him to create, update and delete products data. User C which is not have that permissions are unable to create, update and delete products data.

- Resource: The products data.
- Permissions Giver: User A, he has permissions to give another user permissions to access and operate the resource.
- Authorized User: User B, he has permissions to allow him to access and operate the resource.

## How It Can Be Different

Authentication and authorization has different purposes. Authentication is used to verify the user that want to access the system, while authorization is used to verify what kind of resources that authenticated user are allowed to access and operate.

So authorization is usually implemented together with authentication. After a user apply his credentials and then considered authenticated, the system usually will show only resources that he can access and operate.

## Conclusion

In summary, authentication and authorization are distinct yet complementary processes critical to securing access to systems and resources. Understanding the difference between authentication and authorization is essential for implementing good security practices.

Understanding the difference between authentication and authorization is essential for implementing good security practices.

The Difference Between Authentication and Authorization

React essentially has two types of components that can be created: class components and function components. Features such as state, lifecycle, and others can only be applied to class components and are not possible to implement in function components. However, since React v16.8.0, function components can perform many tasks that were traditionally exclusive to class components with the help of Hooks.

Hooks are special functions that can be applied within function components to access various features provided by React. While in class components, we use methods like `componentDidMount` and others to access lifecycles, in function components, we can use Hooks to access the lifecycle of a component. Hooks are typically named with the prefix "use."

There are several built-in Hooks provided by React, including:

- useState
- useEffect
- useRef
- useMemo
- useCallback
- useContext

## Rules When Using Hooks

There are some rules that must be followed when using Hooks to avoid unwanted issues.

**Hooks can only be used inside function components or custom hooks that we create ourselves.** Hooks cannot be applied inside functions in general or class components.

**Hooks can only be used at the top level within function components.** Therefore, Hooks should not be placed inside conditional statements, loop statements, or nested functions. By adhering to this rule, you ensure that Hooks are called in the same order every time the component is rendered, allowing React to maintain the state of Hooks when `useState` and `useEffect` are called.

```tsx
import { useState } from 'react';

const Menu = ({ title }) => {
  // Hooks are applied at the top level like this
  const [theme, setTheme] = useState('light');

  if (true) {
    // This is not allowed
    // Because it is applied inside a conditional statement
    const [value1, setValue1] = useState("Tekken");
  }

  const toggleTheme = () => {
    setTheme(theme === 'dark' ? 'light' : 'dark');

    // This is not allowed
    // Because it is applied inside a nested function
    const [value2, setValue2] = useState("Final Fantasy");

    while (true) {
      // This is not allowed
      // Because it is applied inside a loop statement
      const [value3, setValue3] = useState("Monster Hunter");
    }
  };

  // This is allowed, as it is still at the top level.
  const [value4, setValue4] = useState("Fire Emblem");

  if (!title) {
    return null
  }

  // This is not allowed
  // Because it is applied inside a conditional statement
  const [value5, setValue5] = useState("Persona");

  return (
    <div>
      <h1>{title}</h1>

      <button
        style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}
        type="button"
        onClick={toggleTheme}
      >
        Toggle Theme
      </button>
    </div>
  );
};

export default Menu;
```

The above rules must be followed because React relies on the order in which Hooks are called every time a component is rendered.

## Conclusion

By understanding what Hooks are, you can use various essential features that React provides directly from within function components. Additionally, adhering to the rules of using Hooks is essential to avoid unintended bugs.

Hooks are special functions that can be applied within function components to access various features provided by React.

Understanding React Hooks

Say we're currently handling a website project with a white interface and bright accent colors. However, at some point, the client requests that the website supports a Dark Theme feature. When visitors click a button in the menu, the website's colors, initially bright, shift towards darker tones for a more eye-friendly experience.

```tsx
import { useState } from 'react';

const Menu = () => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'dark' ? 'light' : 'dark');
  };

  return (
    <div>
      <h1>Menu</h1>

      <button
        style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}
        type="button"
        onClick={toggleTheme}
      >
        Toggle Theme
      </button>
    </div>
  );
};

export default Menu;
```

In the implementation of the above component, we can see that when the "Toggle Theme" button is clicked, the button's color changes based on the value of the "theme" state. However, there's an issue here: the "theme" state can only be accessed by the Menu component itself, whereas the value of the "theme" state needs to be accessed by other components.

In essence, states have two types: local state and global state. Local state is a state applied within a component and can be accessed by that component as well as its child components through props. On the other hand, global state is a state accessible by all components.

In this case, we need to change the "theme" state from local state to global state using the help of a state management library called Zustand.

## What is Zustand

Zustand is a state management library for React that we can use to store state globally. Zustand is easier to use and configure compared to other state management libraries like Redux and has quite good documentation.

Additionally, Zustand has some useful middleware, such as the persist middleware that we can use to synchronize Zustand state with storage like LocalStorage and others. In my opinion, Zustand is also more comfortable to use than the Context API. Due to its simplicity, I often use it in my projects.

## How to Implement Zustand

First, we need to install Zustand through npm in our React project.

```bash
npm install zustand
```

Then create a slice file to store our "theme" state in the store/slices/theme.slice.ts directory. A slice is a part of the store that usually contains the state we create along with functions used to change the value of that state. Here, we create Light Theme as the default theme.

```tsx
import { StateCreator } from 'zustand';

type Theme = 'dark' | 'light';

export type ThemeSlice = {
  theme: Theme;
  setTheme: (value: Theme) => void;
};

export const createThemeSlice: StateCreator<
  ThemeSlice,
  [],
  [],
  ThemeSlice
> = (set) => ({
  theme: 'light',
  setTheme: (theme) => set({ theme }),
});
```

Next, we also need to add the slice we created to the store file in the store/store.ts directory.

```tsx
import { create } from 'zustand';

import { ThemeSlice, createThemeSlice } from './slices/theme.slice';

export const useStore = create<ThemeSlice>()(
  (...a) => ({
    ...createThemeSlice(...a),
  })
);
```

After that, we can use the global state we created with Zustand.

```tsx
// Import the store we created earlier.
import { useStore } from "../../store"; 

const Menu = () => {
  const theme = useStore((state) => state.theme);
  const setTheme = useStore((state) => state.setTheme);

  const toggleTheme = () => {
    setTheme(theme === 'dark' ? 'light' : 'dark');
  };

  return (
    <div>
      <h1>Menu</h1>

      <button
        style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}
        type="button"
        onClick={toggleTheme}
      >
        Toggle Theme
      </button>
    </div>
  );
};

export default Menu;
```

You can also apply it to other components. With this, the "theme" state, which was originally a local state, now becomes a global state.

```tsx
import { useStore } from "../../store"; 

const Header = () => {
  const theme = useStore((state) => state.theme);

  return (
    <div>
      <h1
        style={{
          backgroundColor: theme === 'dark' ? 'white' : 'black'
        }}
      >
        My Website
      </h1>
    </div>
  );
};

export default Header;
```

## Implementation of Persistent State

Global state works well, but when we refresh the website in the browser, the state goes back to its initial value, which is "light," making the Light Theme active again. Ideally, when a website visitor chooses the Dark Theme and refreshes the website, the Dark Theme should automatically be active. Here, we can make Zustand save its state in the browser's LocalStorage, so when the website is refreshed, Zustand checks its stored state in LocalStorage and retrieves it to place it in the store. We just need to use the persist middleware on the store we created earlier.

```tsx
import { create } from "zustand";
import { persist } from "zustand/middleware";

import { ThemeSlice, createThemeSlice } from "./slices/theme.slice";

export const useStore = create<ThemeSlice>()(
  persist(
    (...a) => ({
      ...createThemeSlice(...a),
    }),
    {
      name: "main-storage",
    }
  )
);
```

By default, the persist middleware uses LocalStorage as its storage, but we can create a persist middleware to use a different storage like SessionStorage if desired.

## Conclusion

By using Zustand, the implementation of global state becomes much easier compared to using Redux. Moreover, Zustand has many features that we can use to support the development of a project.

Zustand is a state management library for React that we can use to store state globally.

How To Create Global State With Zustand


Internationalization (i18n) is the process of making a website or application adaptable to various different languages.

Across the world, people understand and use different languages in their daily lives. Americans may not necessarily understand Indonesian, and vice versa, Indonesians may not necessarily understand English.

Therefore, with the implementation of internationalization, we can create a website or application that supports languages people understand, allowing them to use it effectively according to their needs.

## Implementation Steps

To implement internationalization in a React project, we can use a library called LinguiJS.

This library has several advantages, including:

- Can be used in general JavaScript projects.
- Can be used in frameworks other than React.
- Comes with good supporting tools to facilitate i18n implementation.
- Easy to use.

Alright, let's proceed with the implementation in the NextJS 14 framework (using the App Router). First, we need to install the library using npm through the terminal.

```bash
npm install --save-dev @lingui/cli
npm install --save-dev @lingui/macro @lingui/swc-plugin
npm install --save @lingui/react
```

To add new npm scripts to the package.json file, and to update the "build" script for compiling message catalogs before the NextJS build process, follow these steps. This is done to avoid errors during deployment to Vercel.

```json
{
	"scripts": {
		"build": "npm run lingui:compile && next build",
		"lingui:extract": "lingui extract",
	  "lingui:compile": "lingui compile"
	}
}
```

Add the @lingui/swc-plugin to the next.config.js file as follows.

```jsx
/** @type {import('next').NextConfig} */
const nextConfig = {
  // ...Other config that you have

  experimental: {
    swcPlugins: [["@lingui/swc-plugin", {}]],
  },
};

module.exports = nextConfig;
```

Next, create a lingui.config.js file in the project's root. This file contains LinguiJS configurations for your project.

```jsx
/** @type {import('@lingui/conf').LinguiConfig} */
module.exports = {
  locales: ["en", "id"],
  sourceLocale: "en",
  catalogs: [
    {
      path: "<rootDir>/app/locales/{locale}/messages",
      include: ["app"],
    },
  ],
  format: "po",
};
```

Explanation regarding each property in the configuration:

- **locales** are the languages that will be applied to your project. Here, we use "en" for English and "id" for Indonesian.
- **sourceLocale** is the language used as the message ID, eliminating the need to manually define message IDs. Here, we use English sentences as message IDs.
- **catalogs** is the location where we'll store the message catalog files.
- **format** is the type of format used for the message catalog. Here, we use the "po" format, which is highly recommended.

Optionally, if you are using ESLint, you can install the LinguiJS plugin for ESLint and add the following configuration to your ESLint configuration file in your project, such as .eslintrc.json.

```bash
npm install --save-dev eslint-plugin-lingui
```

```json
{
  "plugins": ["lingui"]
}
```

Then, add the following paths to the .gitignore file to exclude translation results from being included in git commits.

```
app/locales/**/messages.js
```

Next, we need to create a Provider component at app/components/Provider.tsx.

```jsx
"use client";

import { FC } from "react";
import { I18nProvider } from "@lingui/react";
import { i18n } from "@lingui/core";

// Import the compiled message catalog.
import { messages as enMessages } from "../locales/en/messages";
import { messages as idMessages } from "../locales/id/messages";

// Load all message catalogs.
i18n.load({
  en: enMessages,
  id: idMessages,
});

// Activate English as the default language.
i18n.activate("en");

type Props = {
  children: JSX.Element;
};

const Provider: FC<Props> = ({ children }) => {
  return (
    <I18nProvider i18n={i18n}>
	    {children}
    </I18nProvider>
  );
};

export default Provider;
```

Use the Provider component in app/layout.tsx.

```jsx

import { FC } from "react";

import Provider from "./components/Provider";

type Props = {
  children: JSX.Element;
};

const RootLayout: FC<Props> = ({ children }) => {
  return (
    <html>
      <body>
	      <Provider>{children}</Provider>
      </body>
    </html>
  );
};

export default RootLayout;
```

After performing the above configurations, we can now implement them in the components that require it. For example, suppose we have a component like the following.

```jsx
"use client"

import { FC } from "react";

import ContentBody from "./ContentBody";

const Content: FC = () => {
  return (
    <div>
			<h1>Learning LinguiJS</h1>

			<ContentBody value="LinguiJS is really good" />
    </div>
  );
};

export default Content;
```

We can modify it to use LinguiJS like this.

```jsx
"use client"

import { FC } from "react";
import { Trans, msg } from "@lingui/macro";
import { useLingui } from "@lingui/react";

import ContentBody from "./ContentBody";

const Content: FC = () => {
	const { _ } = useLingui();

  return (
    <div>
			<h1>
				<Trans>Learning LinguiJS</Trans>
			</h1>

			<ContentBody value={_(msg`LinguiJS is really good`)} />
    </div>
  );
};

export default Content;
```

After that, we need to run the following command to extract the sentences that will be translated.

```jsx
npm run lingui:extract
```

The command also produces output in the form of a table with columns such as "Language," "Total Count," and "Missing." "Language" represents the languages supported in this project, which are English and Indonesian. "Total Count" indicates the total number of sentences to be translated. "Missing" indicates the number of sentences that have not been translated yet.

![Output from command lingui extract](//images.ctfassets.net/m14gyryibp3h/3LSY9vEbaMmYEpQs6Pg1SX/8e28f3b1f1e90d82888442c21a3ccf41/Screenshot_from_2024-01-31_18-44-46.png)

The command will generate several message catalog files in the "po" format in the directory you specified in the lingui.config.js configuration, which is in the app/locales/en and app/locales/id directories.

Here's an example from the file app/locales/en/messages.po.

```
#: app/components/Content.tsx:15
msgid "Learning LinguiJS"
msgstr "Learning LinguiJS"

#: app/components/Content.tsx:18
msgid "LinguiJS is really good"
msgstr "LinguiJS is really good"
```

Here's an example from the file app/locales/id/messages.po.

```
#: app/components/Content.tsx:15
msgid "Learning LinguiJS"
msgstr ""

#: app/components/Content.tsx:18
msgid "LinguiJS is really good"
msgstr ""
```

The empty sections in the file app/locales/id/messages.po can be filled with their translations.

```
#: app/components/Content.tsx:15
msgid "Learning LinguiJS"
msgstr "Belajar LinguiJS"

#: app/components/Content.tsx:18
msgid "LinguiJS is really good"
msgstr "LinguiJS sangat bagus"
```

After that, we need to compile the message catalog files with the following command.

```
npm run lingui:compile
```

The command will generate the messages.js file in the app/locales/en and app/locales/id directories. These files will be loaded into the previously created Provider.

![Output from command lingui:compile](//images.ctfassets.net/m14gyryibp3h/1R9XGKrreGZBPROXRSTTkj/27495d05230b17c70eb9b2eb1090a6aa/Screenshot_from_2024-01-31_18-49-23.png)

With this, you've successfully created a website with support for multiple languages.

To switch languages, you can use the following example. If needed, combine it with Zustand + Persist middleware to store the selected language in localStorage. This ensures that when the web page is refreshed, the language remains the previously chosen one.

```jsx
"use client"

import { FC } from "react";
import { useLingui } from "@lingui/react";

const LanguageSwitcher: FC = () => {
	const { i18n } = useLingui();

  return (
    <div>
			<button 
				type="button"
				onClick={() => i18n.activate("en")}
			>
				EN
			</button>
			<button
				type="button"
				onClick={() => i18n.activate("id")}
			>
				ID
			</button>
    </div>
  );
};

export default LanguageSwitcher;
```

Here, we can see that the workflow in broad strokes is as follows:

- Define the sentences to be translated using the Trans macro or other macros.
- Run the command to extract these sentences.
- Open the messages.po file in the app/locales/id directory.
- Fill in the translations in the empty quotation sections.
- Run the command to compile the message catalog.

LinguiJS provides numerous features, and you can explore them further in its official documentation at https://lingui.dev/introduction.

## Conclusion

Internationalization is crucial for making websites or applications accessible to users from various countries worldwide. With LinguiJS, the implementation of internationalization becomes more straightforward.

Internationalization (i18n) is the process of making a website or application adaptable to various different languages.

I18n Implementation in React

Web page not only able to show the data from the server, but also able to create new data, update the data, or even delete the existing data. For example, adding a product to the cart in e-commerce website.

```javascript
const ProductDetailPage = () => {
  const [isLoading, setIsLoading] = useState(false)

  const buy = async (productId) => {
    try {
      setIsLoading(true)

      const response = await axios.post('/orders', {
        product_id: productId,
      })

      alert('Product successfully added to cart.')
    } catch (error) {
      alert('Failed to add the product to cart.')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div>
      {/* Show product detail here. */}

      {!isLoading && (
        <button type="button" onClick={() => buy(10)}>
          Add to Cart
        </button>
      )}
      {isLoading && (
        // Show loading here.
      )}
    </div>
  )
}

```

We can see that those implementation have many lines of code especially when we need to add the same logic for other pages in a website. Also sometimes we need to implement a technique called optimistic update. That's become complicated.

## Solution

Not only for [fetching the data](https://gattigaga.com/articles/fetching-data-with-react-query), React Query also can be used to create new data, update the data, or even delete the existing data. First we can create a new custom hook in a new file, use-buy-product-mutation.js for example.

```javascript
const action = async (payload) => {
  const response = await axios.post('/orders', {
    product_id: payload.productId,
  })

  return response
}

const useBuyProductMutation = () => useMutation(action)
```

Then later we can use our custom hook that we already created in the any pages or components that need it.

```javascript
const ProductDetailPage = () => {
  const buyProductMutation = useBuyProductMutation()

  return (
    <div>
      {/* Show product detail here */}

      {!buyProductMutation.isLoading && (
        <button
          type="button"
          onClick={() => {
            buyProductMutation.mutate(
              {
                productId: 10
              },
              {
                onSuccess: () => {
                  alert('Product successfully added to cart.')
                },
                onError: () => {
                  alert('Failed to add the product to cart.')
                },
              }
            )
          }}>
          Tambahkan
        </button>
      )}
      {buyProductMutation.isLoading && (
        // Show loading here.
      )}
    </div>
  )
}
```

We can also implement technique called optimistic update like below if we need it. Optimistic update not only for creating a new data only, but also for updating the data, or even deleting the existing data. Optimistic update implementation is a bit complicated, but a lot more complicated if you are not using React Query.

```javascript
const action = async (payload) => {
  const response = await axios.post('/orders', {
    product_id: payload.productId,
  })

  return response
}

const useBuyProductMutation = () => {
  const queryClient = useQueryClient()

  return useMutation(action, {
    onMutate: async (payload) => {
      // Cancel a query that used to get order list.
      await queryClient.cancelQueries(['orders'])

      // Get order list data that already fetched
      // and saved in the cache before.
      // Let's say we already implement a query
      // to get order list: useOrdersQuery.
      const previousOrders = queryClient.getQueryData(['orders'])
      // Get ourself's account data that logged in now
      // that already fetched and saved in the cache before.
      // Let's say we already implement a query to get
      // ourself's account data that logged in: useMeQuery.
      const previousMe = queryClient.getQueryData(["me"])

      // Get a value that passed in as an argument
      // in the .mutate() method that used in a page or component.
      const {
        productId,
        slug,
        title,
        price,
        thumbnail
      } = payload

      // Need to add a dummy data to cache owned by
      // a query with query key ['orders'] that is useOrdersQuery
      // while the request process to /orders run.
      if (previousOrders && previousMe) {
        const newOrder = {
          id: Date.now(),
          user_id: previousMe.id,
          product_id: productId,
          title,
          price,
          thumbnail,
        }

        const data = [
          ...previousOrders,
          newOrder,
        ]

        queryClient.setQueryData(['orders'], data)
      }

      return { previousOrders }
    },
    onError: (error, payload, context?: Context) => {
      // If errors happens when request to the /orders,
      // order list data that lives in the cache will be reverted back
      // to remove the dummy data.
      if (context?.previousOrders) {
        queryClient.setQueryData(['orders'], context.previousOrders)
      }
    },
    onSettled: () => {
      // After success or error, we need to synchronize
      // to get the latest order list data.
      // Query with query key ['orders'] that is useOrdersQuery
      // will fetching data in the background.
      queryClient.invalidateQueries(['orders'])
    },
  })
}
```

Then we can use it like this.

```javascript
const ProductDetailPage = () => {
  const buyProductMutation = useBuyProductMutation();

  return (
    <div>
      {/* Show product detail here. */}

      <button
        type="button"
        disabled={buyProductMutation.isLoading}
        onClick={() => {
          buyProductMutation.mutate(
            {
              productId: 10,
              title: "Product A",
              price: 500,
              thumbnail: "IMAGE_URL_HERE",
            },
            {
              onSuccess: () => {
                alert("Product successfully added to cart.");
              },
              onError: () => {
                alert("Failed to add the product to cart.");
              },
            }
          );
        }}
      >
        Add to Cart
      </button>
    </div>
  );
};
```

To have a better understanding about optimistic update, you can read [this article](https://gattigaga.com/articles/what-is-optimistic-update).

## Conclusion

Here we can see that React Query not only able to fetching the data, but also helps us to create new data, update the data, or even delete the existing data. Information on the above only explain small parts of things that React Query able to do, because there are so many features that React Query provide for us. One more time I remind you, it will be hard at start, but believe me, React Query is really useful and worth to invest your time for learning it.


Not only for fetching the data, React Query also can be used to create new data, update the data, or even delete the existing data.

Using React Query to Processing Data to the Server

In a website, usually we need to get certain data from the server then we will show it on the web page, product list for example. Data that comes from the server we called it as server state. In React, we usually use axios to create a request to the server to get data in the response and then that data we save to the state like this.

```javascript
const ProductListPage = () => {
  const [products, setProducts] = useState([])
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        setIsLoading(true)

        const response = await axios.get('/products')

        setProducts(response)
      } catch (error) {
        console.log(error)
      } finally {
        setIsLoading(false)
      }
    }

    fetchProducts()
  }, [])

  return (
    <div>
      {!isLoading && (
        // Show product list here.
      )}
      {isLoading && (
        // Show loading here.
      )}
    </div>
  )
}
```

Those code we used to get all products and then we can show it to the web page. But, there are another cases regarding data-fetching that we need to pay attention.

- **How if we have products data too much, around 100,000 items for example?** We can implement pagination for product list by showing 20 items per page.
- **What should we do if there's an error when fetching products?** We can show the error in the product list section in that corresponding web page.
- **How we can recover from that error?** We can try to refetching the data if the error has been fixed on the server.
- **How we can fetch the products from page A then later we can show it on the page B?** We can try to fetching products from page A then later we can save the response to the global state, then we can show it on the page B.
- **How we can get latest data from the server?** We can refetching when needed from any web pages.

Those are parts of many other cases that might happen regarding data-fetching. To implement those kind of things, is not easy and need so much effort. We need to think about where we should define the state, we need to think about how data from pagination should be saved, and think about other troublesome things. Usually in a website, there are many variants of data that need to be requested to the server that later we can show it on the web page, not only product list. It's really painful.

## Solution

With using React Query, we can doing data-fetching better and solve those kinds of problems. There are some examples to fetching data with React Query. First we can create a custom hook in a file, for example _use-products-query.js_. Here _['products', payload]_ is a query key, it's like a unique identity for a query, so if the query key changes so the query will doing data-fetching and if the data successfully fetched, then isLoading will change from true to false. And if a query from a query key is already doing data-fetching or already has initial data, then isLoading will always be false because React Query later will doing data-fetching in the background for that query key. That's why we can also use isFetching.

```javascript
const action = (payload) => {
  const response = await axios.get('/products', {
    params: payload
  })

  return response
}

const useProductsQuery = (payload) => {
  return useQuery(['products', payload], () => action(payload))
}
```

Then later we can use our custom hook that we already created in the any pages or components that need it.

```javascript
const ProductListPage = () => {
  const productsQuery = useProductsQuery()

  return (
    <div>
      {productsQuery.isSuccess && (
        // Show product list here.
      )}
      {productsQuery.isError && (
        // Show error here.
      )}
      {productsQuery.isLoading && (
        // Show loading here.
      )}
    </div>
  )
}

```

We can also implement the filter for the product list, so every time category changed, then the query will doing data-fetching to filter the products.

```javascript
const ProductListPage = () => {
  const [category, setCategory] = useState("gadget");
  const productsQuery = useProductsQuery({ category });

  // Other code here.
};
```

For example, there's an error happen when fetching the data, then we can show the error message and a button that we can use to recover from that error if the error on the server has been fixed. So when we click that button, the query will be refetching the data and show the loading.

```javascript
const ProductListPage = () => {
  // Other code here.

  return (
    <div>
      {productsQuery.isSuccess && (
        // Show product list here.
      )}
      {productsQuery.isError && (
        <div>
          <p>Products cannot be shown.</p>
          <button
            type="button"
            onClick={() => productsQuery.refetch()}
          >
            Try Again
          </button>
        </div>
      )}
      {productsQuery.isLoading && (
        // Show loading here.
      )}
    </div>
  )
}

```

We can also if we need to do data-fetching for page B from page A for example. Page B will be show product list data that already fetched in page A (cached data), but page B will still doing data-fetching of product list data in the background to keep in sync with the latest data. Here loading might be not appears on the page B because product list is already fetched in page A.

```javascript
const APage = () => {
  const productsQuery = useProductsQuery()

  return (
    <div>
      <button
        type="button"
        onClick={() => productsQuery.refetch()}
      >
        Fetch product list.
      </button>
    </div>
  )
}

const BPage = () => {
  const productsQuery = useProductsQuery()

  return (
    <div>
      {productsQuery.isSuccess && (
        // Show product list here.
      )}
      {productsQuery.isError && (
        // Show error here.
      )}
      {productsQuery.isLoading && (
        // Show loading here.
      )}
    </div>
  )
}

```

We can also implement pagination with ease. Previously, please make sure that REST API /products to supports pagination as well. Code below will be used to get product list with category gadget on the page 1.

```javascript
const ProductListPage = () => {
  const [category, setCategory] = useState("gadget");
  const [page, setPage] = useState(1);
  const productsQuery = useProductsQuery({ category, page });

  return (
    <div>
      {productsQuery.isSuccess && (
        <>
          {/* Show product list here. */}

          <Pagination
            currentPage={page}
            totalPages={productsQuery.data.last_page}
            onPageChange={(pageIndex) => {
              setPage(pageIndex)
            }}
          />
        </>
      )}
      {productsQuery.isError && (
        // Show error here.
      )}
      {productsQuery.isLoading && (
        // Show loading here.
      )}
    </div>
  )
};
```

## Conclusion

With using React Query, data-fetching implementation will be easy, less effort, cleaner code and easier to read, and definitely will make us more productive. It will be hard at start, but believe me, React Query is really useful and worth to invest your time for learning it.


With using React Query, data-fetching implementation will be easy, less effort, cleaner code and easier to read, and definitely will make us more productive.

Fetching Data with React Query

When we create a form for web page, we need to define any values that form need to send later like Email and Password.

```html
<form>
  <div>
    <label>Email</label>
    <input type="email" name="email" />
  </div>

  <div>
    <label>Password</label>
    <input type="password" name="password" />
  </div>

  <button type="submit">
    Submit
  </button>
</form>
```

In React, we can do it like this. We can use useState hook to save value that form need to send.

```javascript
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

const submit = () => {
  // Access to email and password is needed here
  // for later will be send to the server via REST API.
  // Besides that, we need to show alert when submit success or error.
};

return (
  <form>
    <div>
      <label>Email</label>
      <input
        type="email"
        name="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
    </div>

    <div>
      <label>Password</label>
      <input
        type="password"
        name="password"
        value={password}
        onChange={(event) => setPassword(event.target.value)}
      />
    </div>

    <button type="submit" onClick={submit}>
      Submit
    </button>
  </form>
);
```

But there's a problem here. If there's any values that need to be defined, then the code will be like this.

```javascript
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [address, setAddress] = useState("");
const [province, setProvince] = useState("");
const [district, setDistrict] = useState("");
const [subdistrict, setSubdistrict] = useState("");
const [postalCode, setPostalCode] = useState("");
// Other values useState here.

return (
  <form>
    <div>
      <label>Email</label>
      <input
        type="email"
        name="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
    </div>

    <div>
      <label>Password</label>
      <input
        type="password"
        name="password"
        value={password}
        onChange={(event) => setPassword(event.target.value)}
      />
    </div>

    

    <button type="submit" onClick={submit}>
      Submit
    </button>
  </form>
);
```

Yet we need to validate values that we insert into form to prevent any invalid values sent to the backend and we need to show error message under corresponding input when value is invalid. And maybe we need to reset form after form successfully sent. There are so many things that we need to care about when we create a form.

## Solution

Here Formik give a solution for handling form in React. Starts from defining values for form, validation, and many others and form will not sent if there's still invalid values exists.

```javascript
const form = useFormik({
  initialValues: {
    email: "",
    password: "",
  },
  validate: (values) => {
    const { email, password } = values;
    const errors = {};

    if (!email) {
      errors.email = "Email is required";
    } else if (
      !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
    ) {
      errors.email = "Email format is invalid";
    }

    // Other validation here.

    return errors;
  },
  onSubmit: async (values, actions) => {
    try {
      const { email, password } = values;

      actions.setSubmitting(true);

      // This is only dummy function.
      await submitToServer({
        email,
        password,
      });

      actions.resetForm();
      // Show success alert here.
    } catch (error) {
      // Show error alert here.
    } finally {
      actions.setSubmitting(false);
    }
  },
});

return (
  <form>
    <div>
      <label>Email</label>
      <input
        type="email"
        name="email"
        value={form.values.email}
        onChange={form.handleChange}
      />
      {!!form.errors.email && <p>{form.errors.email}</p>}
    </div>

    <div>
      <label>Password</label>
      <input
        type="password"
        name="password"
        value={form.values.password}
        onChange={form.handleChange}
      />
      {!!form.errors.password && <p>{form.errors.password}</p>}
    </div>

    <button type="submit" onClick={() => form.handleSubmit()}>
      Submit
    </button>
  </form>
);
```

For better validation, we can combine Formik with validation schema like Yup or Zod to replace validate function.

```javascript
import { useFormik } from "formik";
import { z } from "zod";
import { toFormikValidationSchema } from "zod-formik-adapter";

const signInSchema = z.object({
  email: z
    .string({
      required_error: "Email is required",
    })
    .email("Email format is invalid"),
  password: z.string({
    required_error: "Password is required",
  }),
});

const form = useFormik({
  initialValues: {
    email: "",
    password: "",
  },
  validationSchema: toFormikValidationSchema(signInSchema),
  onSubmit: async (values, actions) => {
    try {
      const { email, password } = values;

      actions.setSubmitting(true);

      // This is only dummy function.
      await submitToServer({
        email,
        password,
      });

      actions.resetForm();
      // Show success alert here.
    } catch (error) {
      // Show error alert here.
    } finally {
      actions.setSubmitting(false);
    }
  },
});

return (
  <form>
    <div>
      <label>Email</label>
      <input
        type="email"
        name="email"
        value={form.values.email}
        onChange={form.handleChange}
      />
      {!!form.errors.email && <p>{form.errors.email}</p>}
    </div>

    <div>
      <label>Password</label>
      <input
        type="password"
        name="password"
        value={form.values.password}
        onChange={form.handleChange}
      />
      {!!form.errors.password && <p>{form.errors.password}</p>}
    </div>

    <button type="submit" onClick={() => form.handleSubmit()}>
      Submit
    </button>
  </form>
);
```

## Conclusion

In this article we learned how combination of Formik and Zod can make code structure regarding form creation become cleaner, less code, and easy to implement for creating a better form.

Here Formik give a solution for handling form in React. Starts from defining values for form, validation, and many others.

Handling Form with Formik

When we work on React component, maybe sometimes we need to access DOM element from the website with JavaScript. This is the code that you usually used to access DOM element with plain JavaScript without React.

```javascript
const sidebarElement = document.querySelector("#sidebar");
const footerElement = document.querySelector("#footer");
```

Or maybe you want to save an internal value for a component but don't want to have re-render when that value assigned, for example, when we want to have interval for a component. Using useState hook for this case is not good because when value assigned, it will trigger the component to re-render.

```javascript
const [isPhoneVisible, setIsPhoneVisible] = useState(false);

// This will trigger re-render for the component.
setIsPhoneVisible(true)
```

It's not good as well if we only use regular variable like *let* to save a value without re-render. By only using *let* will not trigger the component to re-render, but if re-render happens from parent component for example, the value will be reset to initial value.

```javascript
let isPhoneVisible = false;

// Updating the value for this variable will not trigger re-render.
isPhoneVisible = true;

// Suddenly re-render happens in the parent component.
// isPhoneVisible will be reset to initial value, that is false.
// We don't want the value to reset back to initial value.
```

To overcome those cases, we can use useRef hook. Basically, useRef hook can be used to save value that not need rendering when the value got re-assigned.

```javascript
const refIsPhoneVisible = useRef(false);

// Change value for useRef not triggering re-render.
refIsPhoneVisible.current = true;

// Suddenly re-render happens in the parent component.
// refIsPhoneVisible still have his value, that is true.
```

We can also use it to access DOM element like below.

```javascript
const refSidebarElement = useRef(null);
const refFooterElement = useRef(null);

useEffect(() => {
  refSidebarElement.current?.innerText = "This is Sidebar";
  refFooterElement.current?.innerText = "This is Footer";
}, []);

return (
  <div>
    <div ref={refSidebarElement}>
      <p>Sidebar</p>
    </div>
    <footer ref={refFooterElement}>
      <p>Footer</p>  
    </footer>
  </div>
)
```

Or maybe we want to use interval in a component.

```javascript
const refTimer = useRef(null)

useEffect(() => {
  refTimer.current = setInterval(() => {
    console.log("Hello World");
  }, 1000);

  return () => {
    if (refTimer.current) {
      clearInterval(refTimer.current)
    }
  };
}, []);
```


useRef hook can be used to save value that not need rendering when the value got re-assigned.

Using useRef in React

In an app, sometimes there is a feature that used to save a data with the timing (sometimes called as DateTime or Timestamp technically), either the time when the data saved or the time for other uses, i.e. the time when data will be publish. For example, a feature that used to create an article for a blog that later the article will be publish to the readers.

When the author used that feature, the author fill the form to create an article and set the publish time for that article and then he click the "Save" button to save that article in the database.

![Create Article Feature](//images.ctfassets.net/m14gyryibp3h/6QSOSgcadTto2GSNcq3i0j/795fc59ade6c4c6f2f34d9751aaaeff0/Untitled_Diagram-Page-6__1_.png)

Let say the author is Indonesian and he create the article with publish time in Indonesia timezone (GMT+7), i.e. 21 Feb 2023 10:00. Then that article will be shown to the readers.

Because of the article was saved in the Indonesia timezone (GMT+7), the readers from Indonesia will not have a problem when reading the publish time of that article.

But what if the readers from another country that possibly have different timezone reads the publish time of that article not match with their timezone? For example, they read the article list but that article was not found published in 21 Feb 2023 10:00 in their timezone and of course this will make them confuse.

## Solution

The solution is all the times that related with that data need to save in database in the UTC format. Then when that times need to be appears on the app, the times need to be formatted in the timezone where the readers access the app.

In that case, when the author create an article, even though the article's publish time set in the Indonesia timezone (GMT+7) from the app user interface, but when the article's publish time will be save to the database need to be formatted to the UTC format before. So from 21 Feb 2023 10:00 (GMT+7) become 21 Feb 2023 03:00 (UTC).

After that when publish time need to appears on the app user interface, it needs to be formatted from UTC to each of the timezone of the app users.

For example, the user from Indonesia using the app, so the article's publish time need to be formatted from UTC to GMT+7. Then there is a user from Japan using the app, so the article's publish time need to be formatted from UTC to GMT+9. We can format the time in the frontend.

![Timestamp Formatting Flow](//images.ctfassets.net/m14gyryibp3h/1Tqss4n5TkvEMvcMd39n08/9710b21efb3ecbd5c4807875dd52ef37/Untitled_Diagram-Page-3__2_.png)

## Conclusion

With the formatting process from user timezone to the UTC and vice-versa, this can prevent the user from many different timezone to confuse about the time of the data that appears on the app user interface. And it's better if you implement this when you start developing an app.

With the formatting process from user timezone to the UTC and vice-versa, this can prevent the user from many different timezone to confuse about the time of the data that appears on the app user interface.

Why You Should Save Timestamp in UTC Format

## Case

There is a case, let say there is an Point of Sales app. It has feature to add product quantity in the cart. When cashier add product quantity in the cart, there is a common flow like this:
- There is a product in the cart with 1 quantity.
- Cashier click "+" button in that product.
- Loading appears and app will send a request to the server via API for adding 1 quantity for that product.
- If successful, then the server will return a response to the app in the form of product data with updated quantity that is 2.
- That data saved by the app and will be shown as a product with 2 quantity in the cart.

![POS User Interface](//images.ctfassets.net/m14gyryibp3h/6JMLrTgLZor1Q5xky379Ws/5f5189bc8378c301301e8f7397f73815/pos-overview-en.png)

![Product in the Cart](//images.ctfassets.net/m14gyryibp3h/6LvM8VHB7MvcHeWpxrXEba/e70df0d427c71397dfb99acdf432778b/product-in-the-cart-en.png)

![POS shows Loading](//images.ctfassets.net/m14gyryibp3h/4vkDf3d2yhcEmz2vHfDLio/1a97913b502f1279df78dbba02edab4c/pos-with-loading-en.png)

In that flow, we can see if every time cashier adding product quantity, then loading will appears when communication between the app and the server happens and this is bad user experience. This must be annoying if every time adding quantity then loading appears.

![Regular Flow](//images.ctfassets.net/m14gyryibp3h/ZUmtR9jZzjdbyU5u4cJGk/6f4d606db1a614067f7152f256ed3a96/regular-flow-en.png)

Then how about to not show the loading when communication between the app and the server happens? This is also bad user experience because when cashier click the "+" button, product quantity will not updated immediately because need to wait for communication between the app and the server successfully done first. This must be annoying if there is no feedback that immediately appears every time when adding quantity.

## The Role of Optimistic Update

This is the role of Optimistic Update method as a solution of that problem. With optimistic update, we use fake data to show while communication between the app and the server happens. More details as below:
- There is a product in the cart with 1 quantity.
- Cashier click "+" button in that product.
- App will send a request to the server via API for adding 1 quantity for that product.
- While the communication process takes place, app will create and save fake data in the form of that product with 2 quantity and shown immediately in the cart.
- When communication done successfully, then the server will return a response to the app in the form of product data with updated quantity that is 2.
- Data from that response will be used to replace fake data that we talk earlier.
- But if the communication done but failed, then the app will revert the condition of that product that is quantity will going back to 1.

In that flow, we can see if the updated quantity shown immediately in the cart without the needs to show loading even though the communication process between the app and the server still run. Even though the adding quantity process is failed in the server, quantity value will revert back as before. This makes the user experience become more responsive.

![Optimistic Update Flow](//images.ctfassets.net/m14gyryibp3h/5EOq5UG7OygSeyWkX5n9mX/2932cbda93fd720f46b613fc853d0f67/optimistic-update-flow-en.png)

## Conclusion

Optimistic Update can become a solution for better user experience when dealing with data exchange process between the app and the server. Well this method is looks so hard to implement. But with the help of React Query, this method will be easier to implement. [React Query](https://tanstack.com/query/latest) itself is a library that used for doing data-fetching in the React environment and have a feature to implement [Optimistic Update](https://tanstack.com/query/v4/docs/react/guides/optimistic-updates).

With optimistic update, we use fake data to show while communication between the app and the server happens.

What is Optimistic Update

## What is Tailwind CSS

[Tailwind CSS](https://tailwindcss.com) is a CSS framework that contains many CSS classes that ready to use to style our HTML elements.

## Reasons to use Tailwind CSS

Tailwind CSS is different with Bootstrap that provides many UI components. It's so low-level because only contains many CSS classes.

With Tailwind CSS, we can use that classes to avoid the usage of arbitrary values we often use when writing CSS so we can create style that more consistent.

Basically, we can implement the class to HTML elements immediately without the needs of writing CSS in different files. We can also implement media query for responsive design, interaction like hover and focus, and also dark mode immediately by implementing CSS classes to our HTML elements.

In production, Tailwind CSS automatically removes all unused CSS classes it has that we don't used and most Tailwind projects ship less than 10kb of CSS file so it will be faster to load by visitor web browser.

We can also customize Tailwind CSS as our needs. For example, we can customize typography, color palette, and spacing as our choice, we can implement it inside configuration file that already provided. That is *tailwind.config.js*.

To support the development process, officially, Tailwind CSS provide an extension for Visual Studio Code. With this, we have autocomplete suggestions when using Tailwind CSS classes in HTML elements.

## Using Tailwind CSS

After installation and configuration of Tailwind CSS, we can immediately use the provided CSS classes for implementation in our HTML elements.

Is with Tailwind CSS I don't need to learn about CSS fundamentals ? of course not. It's better to learn CSS fundamentals first then learn about Tailwind CSS. So that we can know what kind of style that we need to implement when working on the UI designs.

Even though we can implement the style only using CSS classes that provided by Tailwind CSS, Sometimes we need to implement inline-styles or custom classes when working on the inconsistent UI designs.

## Conclusion

I always using Tailwind CSS when implementing style in the projects at work. Because I feel more productive. I don't need to think about naming when create a new class and also not to confuse about optimization. Give yourself a chance to use Tailwind CSS and feel the benefits of it.

Tailwind CSS is a CSS framework that contains CSS classes that ready to use to style our HTML elements.

Tailwind CSS and It's Benefits

In the previous version of Javascript (ES5) we usually use **var** to declare variable, but after ES6 released, we can now use **let** and **const**.

So what the difference between **var**, **let**, and **const** ? let me explain below.

## Var

**var** always used to declare variable before Javascript ES6 came. In the outer scope we declare variable **a** with value **0**, and then in the inner scope we try to redeclare variable **a** and it value was overridden from **0** into **1**.

Variable **b** was declared in outer scope and has been overridden from **1** into **3**. Variable **c** was declared in inner scope and still accessible in outer scope.

```javascript
var a = 0;
var b = 1;

if (true) {
  var a = 1; // overridden
  var c = 2; // create new variable
  b = 3; // overridden

  console.log("a", a); // a = 1
  console.log("b", b); // b = 3
  console.log("c", c); // c = 2
}

console.log("a", a); // a = 1
console.log("b", b); // b = 3
console.log("c", c); // still accessible here (c = 2)
```

## Let

**let** was came with Javascript ES6. In the outer scope we declare variable **a** with value **0**, and then in the inner scope we try to redeclare variable **a** but instead of override the value, it create new variable instance which can be accessed only inside inner scope.

Variable **b** was declared in outer scope and has been overridden from **1** into **3**. Variable **c** was declared in inner scope but cannot be accessed from outer scope.

**let** is like **var** but instead of override the variable at redeclaration, it create new variable instance. If declared in the inner scope, it cannot be accessed from outer scope.

```javascript
let a = 0;
let b = 1;

if (true) {
  let a = 1; // create new variable
  let c = 2; // create new variable
  b = 3; // overridden

  console.log("a", a); // a = 1
  console.log("b", b); // b = 3
  console.log("c", c); // c = 2
}

console.log("a", a); // a = 0
console.log("b", b); // b = 3
console.log("c", c); // error (variable not declared)
```

## Const

**const** was came with Javascript ES6 like **let**, but the value cannot be changed after declared. In the outer scope we declare variable **a** with value **0**, and then in the inner scope we try to redeclare variable **a** but instead of override the value, it create new variable instance which can be accessed only inside inner scope.

Variable **b** was declared in outer scope but the value cannot be overriden. Variable **c** was declared in inner scope but cannot be accessed from outer scope.

**const** is like **let** but the value cannot be changed.

```javascript
const a = 0;
const b = 1;

if (true) {
  const a = 1; // create new variable
  const c = 2; // create new variable
  b = 3; // error (constant cannot be changed)

  console.log("a", a); // a = 1
  console.log("b", b); // b = 1
  console.log("c", c); // c = 2
}

console.log("a", a); // a = 0
console.log("b", b); // b = 1
console.log("c", c); // error (variable not declared)
```

The biggest difference is the value of **var** and **let** still can be changed but **const** not. Now you can just use **let** instead of **var** for the changeable variable in your new code.

So can I replace all **var** into **let** in my old code ? Yes, you can replace but don't do it blindly. Because it has different behavior like I said before.

I was almost use **const** because I rarely need a variable which need to change the value.

Understanding various ways to declare variable in Javascript

Between Var, Let and Const

Pure function is a function which you give the same arguments it will return the same output. It's simple, predictable, and easy to test than impure function. You cannot rely on outer scope variable to do calculation inside a pure function. Rely on it's arguments and inner scope instead.

This is an example of pure function :

```javascript
function sum(a, b) {
  return a + b;
}

sum(1, 2); // It always return 3 (1 + 2 = 3)
sum(5, 1); // It always return 6 (5 + 1 = 6)
```

So the criteria of pure function is :

1. Given the same arguments and then return the same output.
2. No side effects.

Side effects are like :

1. Mutates and rely on outer scope variable to do calculation
2. Doing network request
3. Print to console
4. DOM manipulation

If don't meet the criteria, it's certainly an impure function. Impure function is not predictable, you can't expect what the return value is. If you call impure function inside a function, that's function will be impure.

This is an example of impure function :

```javascript
// So you know what the return value is ?
Math.random();

let i = 0;

// It mutates and rely on outer scope variable to do calculation
function add(a) {
  i += 2;
  return i + a;
}

// Same argument but return different value
add(2); // it returns 4 (i = 2)
add(2); // it returns 6 (i = 4)
```

## Conclusion

You should use pure function instead of impure function as possible. It's more simple to implement and make your code less error prone.


Let's write simple function that easier to debug

Understanding Pure Function

You feel complicated about your application state become more complex, but you don't know how to manage that. The state passing into several components sometimes hard to trace. If that happens to you, so you need Redux. And this is the example of the complicated states.

![Complicated States](//images.ctfassets.net/m14gyryibp3h/7EvnnC9WoNOrcpY6v7MArF/ac830efd4e4fa8b1141767d0084d524b/complicated-states.png)

Redux is lightweight Javascript library which can help you manage your application state globally. It can integrate with Javascript Framework or Library like Angular and React. And this is the example if you use Redux.

![Redux States](//images.ctfassets.net/m14gyryibp3h/D0QuzGZHJEU6WMaYtlOph/eadbc0cd29ebdf57653ef15011063f26/redux-states.png)

Yeah, You was like me. I don't find good Redux tutorials in internet too. But now I can explain it to you as easy as possible.

## Explanation

Redux has three main parts:

* Actions
* Reducers
* Store

**Actions** are payloads of information that send data from your application to the store. Actions are just a plain Javascript object. It needs a property named **type** to indicate action behavior (you can assign it with whatever value you want) and property named whatever which can contains application data.

```javascript
// Contains all data needed
// for a new contact
{
  type: 'ADD_CONTACT',
  contactID: 1,
  name: 'Gattigaga Hayyuta Dewa',
  phone: '+62 777 777 777'
}

// Contains contactID for reference
// to delete a contact
{
  type: 'REMOVE_CONTACT',
  contactID: 1
}
```

**Reducers** are function which specify how application state changes after dispatch. The function name will become your state name and it needs two arguments, **state** and **action**. State argument should has default value of state and Action argument which is action you dispatch. You should not mutate state argument directly.

```javascript
function contacts(state = [], action) {
  switch (action.type) {
    case "ADD_CONTACT":
      const { contactID, name, phone } = action;

      return [
        ...state,
        {
          contactID,
          name,
          phone
        }
      ];
    default:
      return state;
  }
}
```

**Store** is the single source of truth which hold your application states. You should only have a single store in your application.

## Practice

Okay, let's practice now. We will create Contact App using React, which has features like add new contact and remove existing contact. First, you should create React project with **create-react-app** from your Terminal.

```bash
create-react-app learn-redux
```

And then install **redux** and **react-redux**.

```bash
npm install --save redux react-redux
```

Create some Action Creators in **src/states/actions.js**. Oh yeah, I forgot to explain what Action Creator is. Action Creator is just a function returning action.

```javascript
// Initial ID of contact
let currentID = 0;

export function addContact(contact) {
  const { name, phone } = contact;
  currentID += 1;

  return {
    type: "ADD_CONTACT",
    id: currentID,
    name,
    phone
  };
}

export function removeContact(id) {
  return {
    type: "REMOVE_CONTACT",
    id
  };
}
```

Next, create a reducer in **src/states/reducers.js**.

```javascript
import { combineReducers } from "redux";

function contacts(state = [], action) {
  switch (action.type) {
    case "ADD_CONTACT":
      // Adding new contact to the list
      return [
        ...state,
        {
          id: action.id,
          name: action.name,
          phone: action.phone
        }
      ];
    case "REMOVE_CONTACT":
      // Removing a contact from the list
      return state.filter(contact => contact.id !== action.id);
    default:
      return state;
  }
}

const Reducers = combineReducers({
  contacts
  // Your other reducers
});

export default Reducers;
```

Now let's create the store in **src/index.js**.

```javascript
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";

import App from "./App";
import Reducers from "./states/reducers";

// Create store from Reducers
const store = createStore(Reducers);

ReactDOM.render(
  // Make the store available to all container components
  // without passing it explicitly
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);
```

And then create a component to contains contact item in **src/components/ContactList.js**.

```javascript
import React from "react";

const ContactList = ({ children }) => (
  <div className="ContactList">{children}</div>
);

export default ContactList;
```

And create contact item itself **src/components/ContactItem.js**.

```javascript
import React from "react";

const ContactItem = ({ name, phone, onClickDelete }) => (
  <div className="ContactItem">
    <p className="ContactItem__name">{name}</p>
    <p className="ContactItem__phone">{phone}</p>
    <button
      type="button"
      className="ContactItem__button"
      onClick={onClickDelete}
    >
      Delete
    </button>
  </div>
);

export default ContactItem;
```

And in **src/App.js** we put all logic in it.

```javascript
import React, { Component } from "react";
import { connect } from "react-redux";

import ContactList from "./components/ContactList";
import ContactItem from "./components/ContactItem";
import { addContact, removeContact } from "./states/actions";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
      phone: ""
    };
  }

  render() {
    const { name, phone } = this.state;
    const { contacts, addNewContact, removeExistingContact } = this.props;

    return (
      <div className="App">
        <div className="App__form">
          <input
            type="text"
            value={name}
            onChange={event => this.setState({ name: event.target.value })}
            className="App__input"
            placeholder="Name"
          />
          <br />
          <input
            type="text"
            value={phone}
            onChange={event => this.setState({ phone: event.target.value })}
            className="App__input"
            placeholder="Phone"
          />
          <br />
          <button
            type="button"
            onClick={() => {
              if (!name || !phone) {
                alert("Field cannot be empty !");
                return;
              }

              this.setState({ name: "", phone: "" });
              addNewContact({ name, phone });
            }}
            className="App__button"
          >
            Add New Contact
          </button>
        </div>
        <ContactList>
          {contacts.map(contact => {
            return (
              <ContactItem
                key={contact.id}
                name={contact.name}
                phone={contact.phone}
                onClickDelete={() => removeExistingContact(contact.id)}
              />
            );
          })}
        </ContactList>
      </div>
    );
  }
}

// Get your state and passing to your App component as props
const mapStateToProps = ({ contacts }) => ({
  contacts
});

// Create functionality which need to use dispatch
const mapDispatchToProps = dispatch => ({
  addNewContact: contact => {
    dispatch(addContact(contact));
  },
  removeExistingContact: contactID => {
    dispatch(removeContact(contactID));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(App);
```

This is the result. You can create new contact and remove existing contact.

![Learning Result](//images.ctfassets.net/m14gyryibp3h/44IR4421dVi3SihEcaCVuI/8c275b22b22b0a40fc3b5e1e7c50eb8a/learning-result.png)

## Conclusion

More larger-scale app usually has more complicated state need to manage. But with Redux, you can create application with non-complicated state. You can manage your application states globally. So, don't worry to use Redux if your application state was complicated and hard to manage. For the last word, You can clone the example code with additional styles from this [repo](https://github.com/gattigaga/basic-redux).

Cheers !

Simple explanation about Redux and how you can use it in your project

Redux in Simple Way

Sometimes you confused by the bugs in your code caused by missing semicolon or importing the wrong packages. You can spend minutes or hours just to find it. Especially if your code is not beauty and hurt your eyes. If it happens, you should fell in love with ESLint and Prettier.

ESLint is a tools which allows developers to discover problems with their Javascript code without executing it. Problem example are like missing semicolon, too much indentation, import non-exisiting packages, unused variables and etc. It will mark the problem with red underline.

ESLint is very customizable. You can choose and use existing linting rules, choose popular style, or create your own. The top 3 popular style is Standard, Google and AirBnB.

And in the other side, Prettier is a code formatter which can make your code looks beautiful. It removes all original styles of your code and transform it into beauty form. It has support for Javascript, JSX, Flow, Typescript, CSS, LESS, SCSS, JSON, GraphQL and Markdown.

## Setup

Let's install ESLint and Prettier from command line first.

```bash
npm install --save-dev eslint prettier
```

And for this case, we setup ESLint and choose popular style provided by AirBnB.

```bash
./node_modules/.bin/eslint --init
```

![Installing ESLint and Prettier](//images.ctfassets.net/m14gyryibp3h/3eHNHR0caTlnd2OmbcZb5R/1eb8843b74dddd2c98bef7f1b3d630c0/installing-eslint-and-prettier.png)

After that, we should integrate Prettier with ESLint.

```bash
npm install --save-dev eslint-plugin-prettier
```

Sometimes, there is a formatting issue conflict where ESLint and Prettier has a different preference. You should disable the conflicting rules and still keeping other rules where Prettier doesn't care.

Let's install **eslint-config-prettier** to solve it.

```bash
npm install --save-dev eslint-config-prettier
```

Edit file **.eslintrc.json** like below.

```json
{
  "extends": [
    "airbnb-base",
    "prettier"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
```

Okay, we will use Visual Studio Code as our text editor and integrate with it. You can download it [here](https://code.visualstudio.com) and then install ESLint and Prettier as extensions from it marketplace.

![ESLint extension in VSCode](//images.ctfassets.net/m14gyryibp3h/4HXynN5Xwl1dwoTkYGtnnQ/55dae17321b48bb1bd80f6a62535302f/extension-eslint.png)

![Prettier extension in VSCode](//images.ctfassets.net/m14gyryibp3h/7hLiVrJNSB01kkuwBYAMfg/9fbf1d2d6e0ff5a551ad2800cf16f756/extension-prettier.png)

## Usage

And now we can try it. First, there are several mistakes which break the rules in example code.

![Unused variables](//images.ctfassets.net/m14gyryibp3h/6tKfKs6r5Z6P64gqRVwZjv/bc0503a2c04a105def91289dddec0736/unused-variables.png)

![Using single quotes](//images.ctfassets.net/m14gyryibp3h/5xmcCMH8v4gPcBExi2APZv/37821f6317f87074cb01049a8898d365/using-single-quotes.png)

Now you can press **Ctrl + Shift + I**, and Voila ! the code looks more beautiful than before. (The red underline still appear because there are unused variables exists and non-existing package imported).

![Formatted with Prettier](//images.ctfassets.net/m14gyryibp3h/3WLlS7Sq89KoFh5p471g23/612b9e3b58f52ae0fbca2d7994a0bc6a/formatted-with-prettier.png)

## Conclusion

As you know, ESLint and Prettier are the best tools which make the developer more fun to code and stop worrying about the code style and missing packages.

Look how ESLint and Prettier can help your code looks better

TheDifferenceBetweenAuthenticationandAuthorization

UnderstandingReactHooks

HowToCreateGlobalStateWithZustand

I18nImplementationinReact

UsingReactQuerytoProcessingDatatotheServer

FetchingDatawithReactQuery

HandlingFormwithFormik

UsinguseRefinReact

WhyYouShouldSaveTimestampinUTCFormat

WhatisOptimisticUpdate

TailwindCSSandIt'sBenefits

BetweenVar,LetandConst

UnderstandingPureFunction

ReduxinSimpleWay

ESLintandPrettierisaBestMatch

The
Difference
Between
Authentication
and
Authorization

Understanding
React
Hooks

How
To
Create
Global
State
With
Zustand

I18n
Implementation
in
React

Using
React
Query
to
Processing
Data
to
the
Server

Fetching
Data
with
React
Query

Handling
Form
with
Formik

Using
useRef
in
React

Why
You
Should
Save
Timestamp
in
UTC
Format

What
is
Optimistic
Update

Tailwind
CSS
and
It's
Benefits

Between
Var,
Let
and
Const

Understanding
Pure
Function

Redux
in
Simple
Way

ESLint
and
Prettier
is
a
Best
Match