Dale L. Jefferson

Posted on May 30, 2019 • Updated on Feb 28, 2020 • Originally published at dalejefferson.com

Redux reimplemented in 12 lines of code

#redux #javascript

I like to reimplement libraries I use, this allows me to better understand how they work, below is my minimal implementation of Redux.

const createStore = reducer => {
  let onChange;
  let state = reducer(undefined, {});
  return {
    getState: () => state,
    subscribe: fn => (onChange = fn),
    dispatch: action => {
      state = reducer(state, action);
      onChange();
    }
  };
};

This works with the example on the Redux homepage below.

const counter = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

const store = createStore(counter);

store.subscribe(() => console.log(store.getState()));

store.dispatch({type: "INCREMENT"}); // 1
store.dispatch({type: "INCREMENT"}); // 2
store.dispatch({type: "DECREMENT"}); // 1

Obviously this only has a fraction of the real Redux API.

Top comments (1)

Heiker • May 31 '19

And with a few more you can have redux-thunk.

const createStore = reducer => {
  let onChange;
  let state = reducer(undefined, {});
+ let store = {
- return {
    getState: () => state,
    subscribe: fn => (onChange = fn),
    dispatch: action => {
+     if(typeof action === 'function') {
+       return action(store.dispatch, store.getState);
+     }
+
      state = reducer(state, action);
      onChange();
    }
  };

+ return store;
};

A bit intrusive but it does the job.

DEV Community

Redux reimplemented in 12 lines of code

Top comments (1)

Read next

Deploying NestJS Application using Vercel and Supabase

Week 4 Recap of #100DaysOfCode: From Creative CSS to JavaScript Adventures 🚀

Detailed Comparison of Prettier, Biomejs, and VoidZero

Building React Native In-App Modules bypassing the JS bridge.