midzer/pico-redux

The smallest possible implementation of Redux. createStore minified is 95 bytes.

Pico Redux

The smallest possible implementation of Redux. createStore minified is 95 bytes.

Pico Redux features a modular design so you only pay (bytes) for the features you use!

Differences with Redux

• Pico Redux is modular, so subscribe is not included with createStore. If you are using React, you will need to use withSubscribe.

// You might need to turn this:
const store = createStore(rootReducer)

// Into this:
const store = withSubscribe(createStore)(rootReducer)

Environment Support

This library supports ES6. If you need to support ES5, you will need to transpile it with Babel.

Install

npm install pico-redux --save-prod

Code

Shut up and show me the code.

import { createStore } from 'pico-redux'

const init = 0

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

const store = createStore(reducer, init)

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

withSubscribe

Adds a subscribe method to the Pico Redux store. withSubscribe will add 208 bytes (minified).

import { createStore, withSubscribe } from 'pico-redux'

const init = 0

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

const store = withSubscribe(createStore)(reducer, init)
store.subscribe(() => {
  console.log(store.getState()) //=> 100
})

store.dispatch({ type: 'INC', value: 100 })

withMiddleware

Even Middleware is an addon. withMiddleware will add 40 bytes (minified) and applyMiddleware will add 140 bytes (minified).

import { applyMiddleware, createStore, withMiddleware } from 'pico-redux'
import thunk from 'redux-thunk'

const init = {
  name: null
}

const reducer = (state, { type, value }) =>
  type === 'SET_NAME' ? { name: value } : state

const middlewares = applyMiddleware(thunk)

const store = withMiddleware(createStore)(reducer, init, middlewares)

const fetchPerson = id => dispatch =>
  fetch(`https://swapi.co/api/people/${id}`)
    .then(response => response.json())
    .then(data => dispatch({ type: 'SET_NAME', value: data.name }))

store.dispatch(fetchPerson(1))

combineReducers

You can combine reducers to into a single larger reducer.

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

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

const reducer = combineReducers({
  todos,
  counter
})

const store = createStore(reducer)

store.getState()
//=> { 'counter': 0, 'todos': [] }