This content originally appeared on DEV Community and was authored by old big
Are you tired of the boilerplate and complexity of Redux? Do you want a state management solution that is fast, simple, and a joy to test?
Meet @oldbig/redux-lite, a new zero-dependency state management library for React that delivers high performance and an effortless developer experience.
Redux DevTools Integration
The Problem with “The Old Way”
Traditional Redux is powerful, but it comes with a cost:
Boilerplate: Writing actions, action creators, reducers, and selectors for every piece of state is tedious.
Complexity: The learning curve can be steep, especially for newcomers.
Bundle Size: Adding Redux and its ecosystem libraries can increase your app’s size.
The redux-lite Philosophy: Simplicity is Key
redux-lite derives your entire state management setup from a single object. That’s it.
Here’s the magic.
- Define Your Store Create a single source of truth. Use the optional helper for state slices that might not be present initially.
// src/store.ts
import { initiate, optional } from '@oldbig/redux-lite';
export const storeDefinition = {
user: {
name: 'Guest' as string | null,
age: 25,
},
settings: optional({
theme: 'dark',
}),
};
- Initiate the Store Call the initiate function once. It returns everything you need.
// src/store.ts (continued)
export const { ReduxLiteProvider, useReduxLiteStore, useSelector } =
initiate(storeDefinition);
- Provide and Consume Wrap your app in the ReduxLiteProvider and use the useReduxLiteStore hook to access state and dispatchers.
// MyComponent.tsx
import { useReduxLiteStore } from './store';
function UserProfile() {
const { user, dispatchPartialUser } = useReduxLiteStore();
const handleLogin = () => {
dispatchPartialUser({ name: 'Alice' });
};
return (
<div>
<h2>Welcome, {user.name ?? 'User'}!</h2>
<button onClick={handleLogin}>Log In</button>
</div>
);
}
Notice how dispatchPartialUser is automatically generated and fully type-safe? You get dispatchers for every top-level key in your store definition!
Why It’s Better
Blazing Fast: With a tiny footprint and built-in deep equality checks, it’s designed for top-tier performance, eliminating unnecessary re-renders automatically.
Super Easy to Learn: The entire API can be mastered in minutes. You define one object, and you’re done.
Effortless to Test: Testing components is trivial. Your state is a simple object, so there’s nothing complex to mock.
Zero Boilerplate: Forget actions, reducers, and selectors.
End-to-End Type Safety: Catch errors at compile time, not runtime.
Ready to simplify your state management?
GitHub Repo: https://github.com/oldbig/redux-lite
NPM Package: https://www.npmjs.com/package/@oldbig/redux-lite
Live Demo: [Link to your deployed todo-list example]
Give it a try and let me know what you think in the comments!
This content originally appeared on DEV Community and was authored by old big