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!
- Pico Redux is modular, so
subscribe
is not included withcreateStore
. If you are usingReact
, you will need to usewithSubscribe
.
// You might need to turn this:
const store = createStore(rootReducer)
// Into this:
const store = withSubscribe(createStore)(rootReducer)
This library supports ES6. If you need to support ES5, you will need to transpile it with Babel.
npm install pico-redux --save-prod
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
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 })
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))
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': [] }