As a best-selling author, I invite you to explore my books on Amazon. Don't forget to follow me on Medium and show your support. Thank you! Your support means the world!
Building large-scale JavaScript applications taught me that state management isn't just a technical concern—it's the architectural foundation that determines whether your application remains maintainable or collapses under its own complexity. I've spent countless hours debugging applications where state was scattered across components, leading to unpredictable behaviors and nightmarish refactoring sessions. Through these experiences, I've identified eight techniques that transform state management from a source of frustration into a reliable system.
Centralized state stores fundamentally changed how I approach application architecture. Instead of having data scattered across dozens of components, I consolidate everything into a single source of truth. This creates a clear data flow where components dispatch actions to update state rather than manipulating data directly. I remember working on an e-commerce platform where product information was duplicated across multiple components—when prices updated, some components showed outdated values while others reflected changes. Moving to a centralized store eliminated these inconsistencies entirely.
// Basic store implementation
class ApplicationStore {
constructor(reducer, initialState = {}) {
this.state = initialState;
this.reducer = reducer;
this.subscribers = [];
this.isDispatching = false;
}
getState() {
if (this.isDispatching) {
throw new Error('Cannot call getState while dispatching');
}
return this.state;
}
dispatch(action) {
if (this.isDispatching) {
throw new Error('Reducers may not dispatch actions');
}
try {
this.isDispatching = true;
this.state = this.reducer(this.state, action);
} finally {
this.isDispatching = false;
}
// Notify all subscribers
this.subscribers.forEach(subscriber => subscriber());
}
subscribe(listener) {
this.subscribers.push(listener);
return () => {
const index = this.subscribers.indexOf(listener);
if (index > -1) {
this.subscribers.splice(index, 1);
}
};
}
}
// Example usage in a React component
function ProductList() {
const [products, setProducts] = useState([]);
const store = useContext(StoreContext);
useEffect(() => {
const unsubscribe = store.subscribe(() => {
const currentState = store.getState();
setProducts(currentState.products);
});
// Initial data fetch
store.dispatch({ type: 'FETCH_PRODUCTS_REQUEST' });
return unsubscribe;
}, [store]);
const handleAddToCart = (productId) => {
store.dispatch({
type: 'ADD_TO_CART',
payload: { productId, quantity: 1 }
});
};
return (
<div>
{products.map(product => (
<ProductItem
key={product.id}
product={product}
onAddToCart={handleAddToCart}
/>
))}
</div>
);
}
Immutable state updates prevent some of the most subtle and difficult-to-track bugs I've encountered. Early in my career, I spent days tracking down an issue where user preferences were mysteriously changing—it turned out multiple components were mutating the same state object. Now I treat state as read-only and create new versions for every change. This approach makes state transitions predictable and enables powerful debugging tools.
// Immutable update patterns
const updateUserProfile = (state, updates) => {
// Wrong: Mutating existing state
// state.user.profile = { ...state.user.profile, ...updates };
// return state;
// Correct: Creating new state
return {
...state,
user: {
...state.user,
profile: {
...state.user.profile,
...updates
}
}
};
};
// Using Immer for complex updates (personal preference)
import produce from 'immer';
const updateUserWithImmer = (state, updates) => {
return produce(state, draft => {
draft.user.profile = { ...draft.user.profile, ...updates };
// Immer handles immutability under the hood
});
};
// Reducer with immutable updates
function userReducer(state = initialState, action) {
switch (action.type) {
case 'UPDATE_USER_PREFERENCES':
return {
...state,
preferences: {
...state.preferences,
...action.payload
}
};
case 'ADD_NOTIFICATION':
return {
...state,
notifications: [
...state.notifications,
{
id: generateId(),
...action.payload,
createdAt: Date.now()
}
]
};
case 'REMOVE_NOTIFICATION':
return {
...state,
notifications: state.notifications.filter(
notification => notification.id !== action.payload
)
};
default:
return state;
}
}
State normalization revolutionized how I handle complex data relationships. I worked on a social media application where user data was nested deeply within posts, comments, and reactions. This led to performance issues and complicated updates. Normalizing the state—storing entities in flat collections with ID references—made the data structure much more manageable.
// Before normalization
const messyState = {
posts: [
{
id: 1,
title: 'My Post',
author: {
id: 101,
name: 'John Doe',
avatar: 'john.jpg'
},
comments: [
{
id: 1001,
text: 'Great post!',
author: {
id: 102,
name: 'Jane Smith',
avatar: 'jane.jpg'
}
}
]
}
]
};
// After normalization
const normalizedState = {
entities: {
users: {
101: { id: 101, name: 'John Doe', avatar: 'john.jpg' },
102: { id: 102, name: 'Jane Smith', avatar: 'jane.jpg' }
},
posts: {
1: {
id: 1,
title: 'My Post',
author: 101,
comments: [1001]
}
},
comments: {
1001: {
id: 1001,
text: 'Great post!',
author: 102,
post: 1
}
}
},
result: [1] // Array of post IDs in order
};
// Normalization utility functions
const normalizePosts = (posts) => {
const entities = {
users: {},
posts: {},
comments: {}
};
const result = [];
posts.forEach(post => {
result.push(post.id);
entities.posts[post.id] = {
...post,
author: post.author.id,
comments: post.comments.map(comment => comment.id)
};
// Normalize author
entities.users[post.author.id] = post.author;
// Normalize comments
post.comments.forEach(comment => {
entities.comments[comment.id] = {
...comment,
author: comment.author.id,
post: post.id
};
entities.users[comment.author.id] = comment.author;
});
});
return { entities, result };
};
// Denormalization for reading
const denormalizePost = (postId, entities) => {
const post = entities.posts[postId];
if (!post) return null;
return {
...post,
author: entities.users[post.author],
comments: post.comments.map(commentId => ({
...entities.comments[commentId],
author: entities.users[entities.comments[commentId].author]
}))
};
};
Middleware layers provide the extensibility I need for real-world applications. In one project, I found myself adding API call logic directly into components, which made testing difficult and created duplicated code. Middleware lets me handle side effects in a centralized way while keeping components focused on presentation.
// Custom middleware chain
const createMiddlewareAPI = (store) => ({
getState: store.getState,
dispatch: (action) => store.dispatch(action)
});
const applyMiddleware = (...middlewares) => {
return (createStore) => (reducer, initialState) => {
const store = createStore(reducer, initialState);
let dispatch = () => {
throw new Error('Dispatching while constructing middleware');
};
const middlewareAPI = createMiddlewareAPI(store);
const chain = middlewares.map(middleware => middleware(middlewareAPI));
dispatch = compose(...chain)(store.dispatch);
return {
...store,
dispatch
};
};
};
// Async action middleware (similar to Redux Thunk)
const thunkMiddleware = ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState);
}
return next(action);
};
// API middleware for handling server communication
const apiMiddleware = ({ dispatch }) => next => async action => {
if (!action.meta || !action.meta.api) {
return next(action);
}
const { url, method = 'GET', body, headers = {} } = action.meta.api;
dispatch({ type: `${action.type}_REQUEST` });
try {
const response = await fetch(url, {
method,
headers: {
'Content-Type': 'application/json',
...headers
},
body: body ? JSON.stringify(body) : undefined
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
dispatch({
type: `${action.type}_SUCCESS`,
payload: data
});
return data;
} catch (error) {
dispatch({
type: `${action.type}_FAILURE`,
payload: error.message
});
throw error;
}
};
// Logging middleware for development
const loggerMiddleware = ({ getState }) => next => action => {
console.group(`Action: ${action.type}`);
console.log('Previous state:', getState());
console.log('Action:', action);
const result = next(action);
console.log('Next state:', getState());
console.groupEnd();
return result;
};
// Composing multiple middleware
const composedMiddleware = applyMiddleware(
thunkMiddleware,
apiMiddleware,
loggerMiddleware
);
Selectors transformed how I derive data from state. I used to write complex transformation logic directly in components, which made them difficult to test and optimize. Now I encapsulate this logic in selectors that can be memoized for performance.
// Basic selector patterns
const getProducts = state => state.entities.products;
const getCartItems = state => state.cart.items;
const getCurrentCategory = state => state.ui.currentCategory;
// Simple derived data selector
const getProductsInCart = createSelector(
[getProducts, getCartItems],
(products, cartItems) => {
return cartItems.map(item => ({
...products[item.productId],
quantity: item.quantity
}));
}
);
// Complex selector with filtering
const getVisibleProducts = createSelector(
[getProducts, getCurrentCategory, getCartItems],
(products, category, cartItems) => {
const productList = Object.values(products);
let filtered = productList;
if (category && category !== 'ALL') {
filtered = productList.filter(product =>
product.category === category
);
}
// Add cart information
return filtered.map(product => ({
...product,
inCart: cartItems.some(item => item.productId === product.id),
cartQuantity: cartItems.find(item => item.productId === product.id)?.quantity || 0
}));
}
);
// Parameterized selectors
const makeGetProductById = () => createSelector(
[getProducts, (state, productId) => productId],
(products, productId) => products[productId] || null
);
// Usage in React component
function ProductDetails({ productId }) {
const getProductById = useMemo(makeGetProductById, []);
const product = useSelector(state => getProductById(state, productId));
if (!product) return <div>Product not found</div>;
return (
<div>
<h1>{product.name}</h1>
<p>{product.description}</p>
<span>${product.price}</span>
</div>
);
}
// Selector factory for complex queries
const createProductSelectors = () => {
const getProductsMap = state => state.entities.products;
const getFilters = state => state.ui.filters;
const getFilteredProducts = createSelector(
[getProductsMap, getFilters],
(products, filters) => {
let result = Object.values(products);
if (filters.category) {
result = result.filter(p => p.category === filters.category);
}
if (filters.priceRange) {
result = result.filter(p =>
p.price >= filters.priceRange.min &&
p.price <= filters.priceRange.max
);
}
if (filters.searchQuery) {
const query = filters.searchQuery.toLowerCase();
result = result.filter(p =>
p.name.toLowerCase().includes(query) ||
p.description.toLowerCase().includes(query)
);
}
return result;
}
);
return { getFilteredProducts };
};
State persistence solved critical user experience problems in my applications. Users expect their data to survive browser refreshes and sessions. I implemented persistence mechanisms that handle schema evolution and data validation.
// Persistence manager with versioning
class StatePersistence {
constructor(key, version = 1) {
this.key = key;
this.version = version;
this.migrations = new Map();
}
addMigration(fromVersion, migrate) {
this.migrations.set(fromVersion, migrate);
}
load() {
try {
const stored = localStorage.getItem(this.key);
if (!stored) return null;
const data = JSON.parse(stored);
// Check version and migrate if needed
if (data.version !== this.version) {
return this.migrateData(data);
}
return data.state;
} catch (error) {
console.error('Failed to load persisted state:', error);
return null;
}
}
migrateData(data) {
let currentData = data;
while (currentData.version < this.version) {
const migration = this.migrations.get(currentData.version);
if (!migration) {
throw new Error(`No migration from version ${currentData.version}`);
}
currentData = migration(currentData);
currentData.version++;
}
return currentData.state;
}
save(state) {
try {
const data = {
version: this.version,
state,
timestamp: Date.now()
};
localStorage.setItem(this.key, JSON.stringify(data));
} catch (error) {
console.error('Failed to persist state:', error);
}
}
clear() {
localStorage.removeItem(this.key);
}
}
// Usage with migration example
const persistence = new StatePersistence('my-app-state', 2);
// Migration from version 1 to 2
persistence.addMigration(1, (oldData) => {
// In version 1, user data was stored differently
const oldState = oldData.state;
return {
...oldData,
state: {
...oldState,
entities: {
...oldState.entities,
users: Object.keys(oldState.entities.users).reduce((acc, userId) => {
const oldUser = oldState.entities.users[userId];
acc[userId] = {
...oldUser,
// Add new fields or transform existing ones
fullName: `${oldUser.firstName} ${oldUser.lastName}`,
preferences: oldUser.preferences || {}
};
return acc;
}, {})
}
}
};
});
// Persistence middleware
const createPersistenceMiddleware = (persistence) => ({ getState }) => next => action => {
const result = next(action);
// Debounce persistence to avoid excessive writes
if (this.persistenceTimeout) {
clearTimeout(this.persistenceTimeout);
}
this.persistenceTimeout = setTimeout(() => {
persistence.save(getState());
}, 500);
return result;
};
// IndexedDB for larger datasets
class IndexedDBPersistence {
constructor(dbName, storeName, version = 1) {
this.dbName = dbName;
this.storeName = storeName;
this.version = version;
}
async open() {
return new Promise((resolve, reject) => {
const request = indexedDB.open(this.dbName, this.version);
request.onerror = () => reject(request.error);
request.onsuccess = () => resolve(request.result);
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains(this.storeName)) {
db.createObjectStore(this.storeName);
}
};
});
}
async save(state) {
const db = await this.open();
return new Promise((resolve, reject) => {
const transaction = db.transaction([this.storeName], 'readwrite');
const store = transaction.objectStore(this.storeName);
const request = store.put(state, 'app-state');
request.onerror = () => reject(request.error);
request.onsuccess = () => resolve();
});
}
async load() {
const db = await this.open();
return new Promise((resolve, reject) => {
const transaction = db.transaction([this.storeName], 'readonly');
const store = transaction.objectStore(this.storeName);
const request = store.get('app-state');
request.onerror = () => reject(request.error);
request.onsuccess = () => resolve(request.result);
});
}
}
Developer tool integration saved me countless hours of debugging. Being able to see the action history and state diffs makes understanding application behavior much easier. I built custom tooling that integrates with popular browser extensions.
// Development tools setup
const enableDevTools = typeof window !== 'undefined' &&
window.__REDUX_DEVTOOLS_EXTENSION__;
const devTools = enableDevTools ?
window.__REDUX_DEVTOOLS_EXTENSION__.connect() : null;
// Enhanced store with dev tools
class DevToolsStore {
constructor(reducer, initialState, enhancer) {
this.reducer = reducer;
this.state = initialState;
this.listeners = [];
this.isDispatching = false;
if (enhancer) {
return enhancer(this);
}
if (devTools) {
devTools.init(initialState);
}
}
dispatch(action) {
if (this.isDispatching) {
throw new Error('Reducers may not dispatch actions');
}
try {
this.isDispatching = true;
const previousState = this.state;
this.state = this.reducer(previousState, action);
// Send to dev tools
if (devTools) {
devTools.send(action, this.state);
}
// Notify listeners
this.listeners.forEach(listener => listener());
} finally {
this.isDispatching = false;
}
}
// ... other store methods (getState, subscribe, etc.)
}
// Action creators with debug information
const createAction = (type, payload, meta = {}) => ({
type,
payload,
meta: {
timestamp: Date.now(),
stack: new Error().stack, // Capture stack trace for debugging
...meta
}
});
// Custom middleware for performance monitoring
const performanceMiddleware = ({ getState }) => next => action => {
const start = performance.now();
const result = next(action);
const end = performance.now();
if (end - start > 16) { // Longer than one frame at 60fps
console.warn(`Action ${action.type} took ${end - start}ms`);
}
return result;
};
// State snapshot utility
class StateSnapshot {
constructor(store) {
this.store = store;
this.snapshots = [];
}
takeSnapshot(label) {
const snapshot = {
label,
state: JSON.parse(JSON.stringify(this.store.getState())), // Deep clone
timestamp: Date.now(),
action: this.lastAction
};
this.snapshots.push(snapshot);
return snapshot;
}
compareSnapshots(index1, index2) {
const snap1 = this.snapshots[index1];
const snap2 = this.snapshots[index2];
return this.deepDiff(snap1.state, snap2.state);
}
deepDiff(obj1, obj2, path = '') {
const diffs = [];
if (obj1 === obj2) return diffs;
if (typeof obj1 !== typeof obj2 || Array.isArray(obj1) !== Array.isArray(obj2)) {
diffs.push({
path,
from: obj1,
to: obj2
});
return diffs;
}
if (typeof obj1 === 'object' && obj1 !== null && obj2 !== null) {
const allKeys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);
for (const key of allKeys) {
const newPath = path ? `${path}.${key}` : key;
if (!(key in obj1)) {
diffs.push({
path: newPath,
from: undefined,
to: obj2[key]
});
} else if (!(key in obj2)) {
diffs.push({
path: newPath,
from: obj1[key],
to: undefined
});
} else {
diffs.push(...this.deepDiff(obj1[key], obj2[key], newPath));
}
}
} else if (obj1 !== obj2) {
diffs.push({
path,
from: obj1,
to: obj2
});
}
return diffs;
}
}
Testing strategies ensure that state management logic remains reliable as applications grow. I've seen too many projects where state-related bugs slip into production because testing was an afterthought. Now I write comprehensive tests for reducers, selectors, and middleware.
// Reducer testing
describe('userReducer', () => {
const initialState = {
currentUser: null,
isLoggedIn: false,
loading: false,
error: null
};
it('should handle LOGIN_REQUEST', () => {
const action = { type: 'LOGIN_REQUEST' };
const expectedState = {
...initialState,
loading: true,
error: null
};
expect(userReducer(initialState, action)).toEqual(expectedState);
});
it('should handle LOGIN_SUCCESS', () => {
const user = { id: 1, name: 'Test User' };
const action = {
type: 'LOGIN_SUCCESS',
payload: user
};
const expectedState = {
currentUser: user,
isLoggedIn: true,
loading: false,
error: null
};
expect(userReducer(initialState, action)).toEqual(expectedState);
});
it('should handle LOGIN_FAILURE', () => {
const error = 'Invalid credentials';
const action = {
type: 'LOGIN_FAILURE',
payload: error
};
const requestState = {
...initialState,
loading: true
};
const expectedState = {
...initialState,
loading: false,
error
};
expect(userReducer(requestState, action)).toEqual(expectedState);
});
it('should return current state for unknown action', () => {
const action = { type: 'UNKNOWN_ACTION' };
expect(userReducer(initialState, action)).toBe(initialState);
});
});
// Selector testing
describe('userSelectors', () => {
const state = {
entities: {
users: {
1: { id: 1, name: 'John', role: 'admin' },
2: { id: 2, name: 'Jane', role: 'user' }
}
},
auth: {
currentUserId: 1
}
};
it('should select current user', () => {
const currentUser = getCurrentUser(state);
expect(currentUser).toEqual(state.entities.users[1]);
});
it('should select users by role', () => {
const adminUsers = getUsersByRole(state, 'admin');
expect(adminUsers).toEqual([state.entities.users[1]]);
});
it('should memoize selector results', () => {
const firstCall = getCurrentUser(state);
const secondCall = getCurrentUser(state);
expect(firstCall).toBe(secondCall); // Same reference due to memoization
});
});
// Middleware testing
describe('apiMiddleware', () => {
const create = () => {
const store = {
getState: jest.fn(() => ({})),
dispatch: jest.fn()
};
const next = jest.fn();
const invoke = (action) => apiMiddleware(store)(next)(action);
return { store, next, invoke };
};
it('should pass through non-api actions', () => {
const { next, invoke } = create();
const action = { type: 'TEST_ACTION' };
invoke(action);
expect(next).toHaveBeenCalledWith(action);
});
it('should handle api actions', async () => {
const { store, next, invoke } = create();
global.fetch = jest.fn(() =>
Promise.resolve({
ok: true,
json: () => Promise.resolve({ data: 'test' })
})
);
const action = {
type: 'FETCH_DATA',
meta: {
api: {
url: '/api/data',
method: 'GET'
}
}
};
await invoke(action);
expect(store.dispatch).toHaveBeenCalledWith({
type: 'FETCH_DATA_REQUEST'
});
expect(store.dispatch).toHaveBeenCalledWith({
type: 'FETCH_DATA_SUCCESS',
payload: { data: 'test' }
});
});
it('should handle api errors', async () => {
const { store, next, invoke } = create();
global.fetch = jest.fn(() =>
Promise.resolve({
ok: false,
status: 404
})
);
const action = {
type: 'FETCH_DATA',
meta: {
api: {
url: '/api/data'
}
}
};
await expect(invoke(action)).rejects.toThrow();
expect(store.dispatch).toHaveBeenCalledWith({
type: 'FETCH_DATA_FAILURE',
payload: 'HTTP error! status: 404'
});
});
});
// Integration testing
describe('state management integration', () => {
let store;
beforeEach(() => {
store = createStore(rootReducer, applyMiddleware(thunk, logger));
});
it('should handle complete user flow', async () => {
// Mock API
global.fetch = jest.fn(() =>
Promise.resolve({
ok: true,
json: () => Promise.resolve({ user: { id: 1, name: 'Test' } })
})
);
// Dispatch login action
await store.dispatch(loginUser('test@example.com', 'password'));
const state = store.getState();
expect(state.auth.currentUser).toEqual({ id: 1, name: 'Test' });
expect(state.auth.isLoggedIn).toBe(true);
expect(state.auth.loading).toBe(false);
});
it('should persist state across sessions', () => {
const initialState = store.getState();
// Simulate persistence
const savedState = JSON.parse(JSON.stringify(initialState));
localStorage.setItem('app-state', JSON.stringify(savedState));
// Create new store with persisted state
const newStore = createStore(
rootReducer,
JSON.parse(localStorage.getItem('app-state')),
applyMiddleware(thunk, logger)
);
expect(newStore.getState()).toEqual(initialState);
});
});
// Performance testing utilities
const measureSelectorPerformance = (selector, state, iterations = 1000) => {
const start = performance.now();
for (let i = 0; i < iterations; i++) {
selector(state);
}
const end = performance.now();
return end - start;
};
// Usage in tests
it('should have acceptable performance', () => {
const largeState = createLargeTestState(); // Helper function
const duration = measureSelectorPerformance(
getComplexData,
largeState
);
expect(duration).toBeLessThan(100); // Should take less than 100ms
});
These eight techniques transformed how I build JavaScript applications. Centralized stores provide structure, immutable updates ensure predictability, and normalization optimizes data handling. Middleware extends functionality, selectors derive data efficiently, and persistence maintains user context. Developer tools offer visibility, while comprehensive testing guarantees reliability. Each technique addresses specific challenges I've faced in real projects, and together they create a robust foundation for applications of any scale. The code examples reflect patterns I've refined through experience—they're not just theoretical concepts but practical solutions to common problems. State management becomes manageable when you approach it systematically, focusing on clarity, performance, and maintainability at every step.
📘 Checkout my latest ebook for free on my channel!
Be sure to like, share, comment, and subscribe to the channel!
101 Books
101 Books is an AI-driven publishing company co-founded by author Aarav Joshi. By leveraging advanced AI technology, we keep our publishing costs incredibly low—some books are priced as low as $4—making quality knowledge accessible to everyone.
Check out our book Golang Clean Code available on Amazon.
Stay tuned for updates and exciting news. When shopping for books, search for Aarav Joshi to find more of our titles. Use the provided link to enjoy special discounts!
Our Creations
Be sure to check out our creations:
Investor Central | Investor Central Spanish | Investor Central German | Smart Living | Epochs & Echoes | Puzzling Mysteries | Hindutva | Elite Dev | Java Elite Dev | Golang Elite Dev | Python Elite Dev | JS Elite Dev | JS Schools
We are on Medium
Tech Koala Insights | Epochs & Echoes World | Investor Central Medium | Puzzling Mysteries Medium | Science & Epochs Medium | Modern Hindutva
Top comments (0)