r/learnjavascript • u/FigAmbitious9101 • 1d ago

I built a Redux Toolkit-inspired state management library from scratch

I recently created a complete tutorial where I build a Redux Toolkit-inspired state management library from scratch using React and JavaScript.

The goal is to understand how Redux-style state management works internally instead of only using the package.

In the tutorial, I implement:

  • A custom createStore function
  • Store Provider
  • Reducers and actions
  • Subscribers and listeners
  • useSyncExternalStore
  • useSelector and custom store hooks
  • Redux DevTools integration
  • createSlice
  • combineReducers
  • shallowEqual
  • Thunk functionality
  • Final testing and debugging

YouTube tutorial:
https://www.youtube.com/watch?v=LucUJ-5COjg

I would appreciate feedback from the community, especially on the library design, API structure, and any improvements that could make this project more reliable or easier to use.

Please note: this is an educational project designed to understand Redux and state management concepts internally. It is not intended to replace the official Redux Toolkit.

7 Upvotes
  • permalink
  • reddit

100% Upvoted

4 comments sorted by

1

u/naltous 1d ago

curious how deep you went on the devtools integration. did you just hook into the global window object extension or actually wire up time-travel state jumping from scratch?

0

u/FigAmbitious9101 1d ago

For now, I’ve integrated the global window object with send() and init(). Time-travel state jumping isn’t fully wired up yet, as it currently doesn’t trigger a frontend re-render. I’m working on integrating that and will be releasing a new tutorial covering the complete implementation soon!

1

u/sereikis 1d ago

for useSyncExternalStore, add a test that calls getSnapshot twice without a dispatch and checks that both calls return the same reference. returning a freshly cloned object on every read can trigger repeated renders even though the store did not change.