redux-sdk-pm-js

1.0.0 โ€ข Public โ€ข Published

๐Ÿง  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

Readme

Keywords

none

Package Sidebar

Install

npm i redux-sdk-pm-js

Weekly Downloads

0

Version

1.0.0

License

ISC

Unpacked Size

32.4 kB

Total Files

25

Last publish

Collaborators

  • pravarmishra08