React & TypeScript: How to use Context API and useReducer hook by creating authentication basic app.

#typescript #react #beginners #tutorial

Here is an example of how you could use React Context and the useReducer hook with TypeScript to create an ecommerce authentication app:

First, you would need to create a context for the authentication state:

import React, { createContext } from 'react';

export const AuthContext = createContext<{
  isAuthenticated: boolean;
  user: User | null;
  login: (username: string, password: string) => Promise<void>;
  logout: () => void;
}>({
  isAuthenticated: false,
  user: null,
  login: () => Promise.resolve(),
  logout: () => {},
});

Next, you would define the types for the state and actions:

type User = {
  id: string;
  username: string;
  email: string;
};

type AuthAction =
  | { type: 'LOGIN'; user: User }
  | { type: 'LOGOUT' };

Then, you would define the reducer function to handle the login and logout actions:

const authReducer: Reducer<{ isAuthenticated: boolean; user: User | null }, AuthAction> = (
  state,
  action
) => {
  switch (action.type) {
    case 'LOGIN':
      return { isAuthenticated: true, user: action.user };
    case 'LOGOUT':
      return { isAuthenticated: false, user: null };
    default:
      return state;
  }
};

Finally, you would create a provider component to wrap your app and manage the authentication state:

import { db } from './firebase';

const AuthProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, {
    isAuthenticated: false,
    user: null,
  });

  // A function to handle login requests
  const login = async (
  ...