Introducing Pico Redux - The faster smaller Redux!

#javascript #functional #es6 #redux

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
})

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)

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