Simplifying State Management : Using Context API with Session Storage instead of Redux

State management is a crucial aspect of building React applications. While Redux is a powerful and widely-used state management library, it may introduce unnecessary complexity in certain scenarios, particularly in less complex applications. In such cases, leveraging React's Context API along with session storage can provide a simpler and lightweight alternative for managing the application state. This article will guide you through the process of implementing the Context API with session storage in a step-by-step manner.

---

Step 1: Setting up the React Project
Create a new React project using TypeScript by running the following command:

npx create-react-app my-app --template typescript
cd my-app

---

Step 2: Creating the Context
In the src folder, create a new file called AppContext.tsx. In this file, define the context and its initial state:

import React, { createContext, useEffect, useState } from 'react';

interface AppState {
  counter: number;
  // Add other state properties here
}

interface AppContextProps {
  appState: AppState;
  incrementCounter: () => void;
  resetCounter: () => void;
}

export const AppContext = createContext<AppContextProps | null>(null);

const AppProvider: React.FC = ({ children }) => {
  const [appState, setAppState] = useState<AppState>({
    counter: 0,
    // Initialize other state properties here
  });

  useEffect(() => {
    const storedState = sessionStorage.getItem('appState');
    if (storedState) {
      setAppState(JSON.parse(storedState));
    }
  }, []);

  useEffect(() => {
    sessionStorage.setItem('appState', JSON.stringify(appState));
  }, [appState]);

  const incrementCounter = () => {
    setAppState((prevState) => ({
      ...prevState,
      counter: prevState.counter + 1,
    }));
  };

  const resetCounter = () => {
    setAppState((prevState) => ({
      ...prevState,
      counter: 0,
    }));
  };

  return (
    <AppContext.Provider
      value={{ appState, incrementCounter, resetCounter }}
    >
      {children}
    </AppContext.Provider>
  );
};

export default AppProvider;

---

Step 3: Providing State and Actions to Components
Wrap your application's root component with the AppProvider and provide the state and actions through the context:

import AppProvider from './AppContext';

function App() {
  return (
    <AppProvider>
      {/* Your application components */}
    </AppProvider>
  );
}

export default App;

---

Step 4: Consuming State and Actions in Components
To access the state and actions within your components, import the AppContext and use the useContext hook:

import React, { useContext } from 'react';
import { AppContext } from './AppContext';

const MyComponent: React.FC = () => {
  const { appState, incrementCounter, resetCounter } =
    useContext(AppContext)!;

  return (
    <div>
      <p>Counter: {appState.counter}</p>
      <button onClick={incrementCounter}>Increment</button>
      <button onClick={resetCounter}>Reset</button>
    </div>
  );
};

By following these steps, you can implement the Context API with session storage in a TypeScript-based React application. Remember to adjust the state properties, actions, and components according to your specific application's needs.

You can find the complete implementation at https://github.com/nirmana/react-context-session-storage.

Happy coding!