🧠 redux-sdk-pm-js

redux-sdk-pm-js is a reusable, plug-and-play Redux SDK that provides a centralized and persistent state management solution for React and Next.js applications. It comes with a pre-configured Redux store, state persistence, and modular structure starting with a user module.

🚀 Key Features

• ✅ Pre-wired Redux Store
• ♻️ Session Persistence via sessionStorage
• 🔍 Modular State Management (starting with user)
• 📦 Easy Integration into any React/Next.js App

📁 Folder Structure

src/
├── api/                     # Axios instance for API calls
│   └── httpClient.js             # Axios instance definition
├── store/
│   ├── index.js             # Redux store setup, state persistence, cross-tab syncing
│   ├── rootReducers.js      # Combines reducers
│   └── user/                # User state module
│       ├── action.js        # Redux actions + SDK method (getUser)
│       ├── actiontypes.js   # Constants for actions
│       ├── reducer.js       # Redux reducer for user state
│       ├── selector.js      # Selectors for accessing user state
│       └── types.js         # Types for user state and actions
└── index.js                 # SDK public entry point + API export

🧩 Module: User

🔧 getUser() Function

await pravar_sdk.user.getUser();

• Fetches mock user data (name, email)
• Dispatches to Redux store
• Accessible via selectors

🎯 Selectors

import { useSelector } from 'react-redux';
import {
  selectUser,
  selectUserName,
  selectUserEmail,
} from 'pravar_sdk/store/user/selector';

const user = useSelector(selectUser);         // Entire object
const name = useSelector(selectUserName);     // Only name
const email = useSelector(selectUserEmail);   // Only email

🏗️ Redux Store Setup

Store: src/store/index.js

• Uses @reduxjs/toolkit's configureStore
• Loads persisted state from sessionStorage
• Saves new state on change
• Exposes store and types

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducers';

const STORAGE_KEY = 'reduxSdkState';

const loadState = () => {
  try {
    const serializedState = sessionStorage.getItem(STORAGE_KEY);
    return serializedState ? JSON.parse(serializedState) : undefined;
  } catch {
    return undefined;
  }
};

const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    sessionStorage.setItem(STORAGE_KEY, serializedState);
  } catch {}
};

export const listenToStorageChanges = (onChange) => {
  window.addEventListener('storage', (event) => {
    if (event.key === STORAGE_KEY) {
      const updatedState = event.newValue ? JSON.parse(event.newValue) : null;
      onChange(updatedState);
    }
  });
};

const preloadedState = loadState();

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

store.subscribe(() => {
  saveState(store.getState());
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

🧩 Integration in App

React

import { Provider } from 'react-redux';
import { store } from 'pravar_sdk';

<Provider store={store}>
  <App />
</Provider>

Next.js

Create _app.js:

import { Provider } from 'react-redux';
import { store } from 'pravar_sdk';

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

📦 Public SDK Entry (src/index.js)

export { store } from './store/index';
import { fetchAndSetUserInternal } from './store/user/action';

export const pravar_sdk = {
  user: {
    getUser: fetchAndSetUserInternal,
  },
};

🧱 Extend This SDK

To add another module (e.g., tickets, notifications):

1. Create a folder under store/ like store/tickets/
2. Add:
   • action.js
   • reducer.js
   • actiontypes.js
   • selector.js
   • types.js
3. Add reducer to rootReducers.js:

   import ticketReducer from './tickets/reducer';
   
   const rootReducer = combineReducers({
     user: userReducer,
     tickets: ticketReducer,
   });

4. Export new methods from SDK in src/index.js like:

   import { fetchTickets } from './store/tickets/action';
   
   export const pravar_sdk = {
     user: { getUser: fetchAndSetUserInternal },
     tickets: { getTickets: fetchTickets },
   };

💡 Switching to localStorage (Optional)

If you prefer localStorage over sessionStorage, update:

const STORAGE_KEY = 'reduxSdkState';
const serializedState = localStorage.getItem(STORAGE_KEY);
localStorage.setItem(STORAGE_KEY, serializedState);

Also update the storage listener to use localStorage instead.

🧪 Example

useEffect(() => {
  const fetch = async () => {
    const userData = await pravar_sdk.user.getUser();
    console.log('User Info:', userData);
  };
  fetch();
}, []);

✅ Summary

• Easily reusable Redux SDK for any project
• Built-in store, persistence, and sync
• Scalable and extendable
• Perfect for microfrontend or modular monorepo architecture