DEV Community

loading...

Introducing Pico Redux - The faster smaller Redux!

JavaScript Joel
Cofounded Host Collective (DiscountASP.net). Cofounded Player Axis (Social Gaming). Computer Scientist and Technology Evangelist with 20+ years of experience with JavaScript!
Updated on ・2 min read

Out of necessity and curiosity, I have created the smallest possible implementation of Redux which comes in at only 95 bytes (minified).

I frequently have needed a stripped down bare bones Redux without all those bells and whistles.

Redux itself is already a pretty small library at 1.6k (gzipped) but I was really looking for something that only had the weight of a single function. Thus Pico Redux was born.

The core Redux functionality itself is very minimal. This is all you need to recreate createStore:

const createStore = (reducer, state = reducer(void 0, { type: '@@init' })) => ({
  dispatch: action => (state = reducer(state, action), action),
  getState: () => state
})
Enter fullscreen mode Exit fullscreen mode

I typically don't need middleware (unless I am in React-land). I also rarely need the subscribe functionality. Just the basic store is usually good enough.

But because I do occasionally use these features, I created Pico Redux with a modular design so these features can still be added... but only when necessary so you only pay (in bytes) for what you use.

// basic store
const store = createStore(reducer)

// store with subscribe
const store = withSubscribe(createStore)(reducer)

// store with middleware
const store = withMiddleware(createStore)(reducer)

// kitchen sink
const store = withMiddleware(withSubscribe(createStore))(reducer)
Enter fullscreen mode Exit fullscreen mode

The interface is kept the same as Redux so you should already be familiar with how to use it:

import { createStore } from 'pico-redux'

const init = 0

const reducer = (state = init, { type, value }) =>
  type === 'INC' ? state + value : state

const store = createStore(reducer)

store.dispatch({ type: 'INC', value: 100 })
store.getState() //=> 100
Enter fullscreen mode Exit fullscreen mode

Try it out, give it a spin, let me know what you think!

Github: https://github.com/joelnet/pico-redux

Inspired by: Redux: Implementing Store from Scratch - Dan Abramov

I'm currently available for part time contract work (C#, JavaScript, React). Hit me up on Twitter or linkedin to get ahold of me.

My articles show massive Functional JavaScript love. If you need more FP, follow me here or on Twitter @joelnet!

Cheers!

Discussion (0)