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.
- โ Pre-wired Redux Store
- โป๏ธ Session Persistence via
sessionStorage
- ๐ Modular State Management (starting with
user
) - ๐ฆ Easy Integration into any React/Next.js App
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
await pravar_sdk.user.getUser();
- Fetches mock user data (
name
,email
) - Dispatches to Redux store
- Accessible via 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
- Uses
@reduxjs/toolkit
'sconfigureStore
- 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;
import { Provider } from 'react-redux';
import { store } from 'pravar_sdk';
<Provider store={store}>
<App />
</Provider>
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;
export { store } from './store/index';
import { fetchAndSetUserInternal } from './store/user/action';
export const pravar_sdk = {
user: {
getUser: fetchAndSetUserInternal,
},
};
To add another module (e.g., tickets
, notifications
):
- Create a folder under
store/
likestore/tickets/
- Add:
action.js
reducer.js
actiontypes.js
selector.js
types.js
- Add reducer to
rootReducers.js
:import ticketReducer from './tickets/reducer'; const rootReducer = combineReducers({ user: userReducer, tickets: ticketReducer, });
- 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 }, };
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.
useEffect(() => {
const fetch = async () => {
const userData = await pravar_sdk.user.getUser();
console.log('User Info:', userData);
};
fetch();
}, []);
- Easily reusable Redux SDK for any project
- Built-in store, persistence, and sync
- Scalable and extendable
- Perfect for microfrontend or modular monorepo architecture