# pico-redux

> A Pico sized Redux

Latest version **1.2.7** (published 2020-07-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install pico-redux
pnpm add pico-redux
yarn add pico-redux
bun add pico-redux
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.7 |
| Published | 2020-07-16 |
| First published | 2018-11-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Joel Thoms |
| Maintainers | joelnet |
| Keywords | redux, reducer, state, functional, immutable |

## Links

- npm: https://www.npmjs.com/package/pico-redux
- Repository: https://github.com/joelnet/pico-redux
- Homepage: https://github.com/joelnet/pico-redux#readme
- Issues: https://github.com/joelnet/pico-redux/issues
- npm.io page: https://npm.io/package/pico-redux

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.2.7 (latest) — 2020-07-16
- 1.2.5 — 2020-07-16
- 1.2.4 — 2019-11-01
- 1.2.3 — 2019-08-08
- 1.2.2 — 2019-06-21
- 1.2.1 — 2019-01-10
- 1.1.7 — 2018-11-19
- 1.1.6 — 2018-11-19
- 1.1.5 — 2018-11-19
- 1.1.3 — 2018-11-18
- 1.1.2 — 2018-11-18
- 1.1.1 — 2018-11-18
- 1.1.0 — 2018-11-18
- 1.0.3 — 2018-11-16
- 1.0.2 — 2018-11-16
- … 2 more at https://npm.io/package/pico-redux/versions

## README

# Pico Redux ![size:95 bytes](https://img.shields.io/badge/size-95_bytes-green.svg) ![dependencies:0](https://img.shields.io/badge/dependencies-0-green.svg) [![build status](https://travis-ci.org/joelnet/pico-redux.svg?branch=master)](https://travis-ci.org/joelnet/pico-redux) [![Coverage Status](https://coveralls.io/repos/github/joelnet/pico-redux/badge.svg?branch=master)](https://coveralls.io/github/joelnet/pico-redux?branch=master)

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`.

```javascript
// 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

```bash
npm install pico-redux --save-prod
```

# Code

Shut up and show me the code.

```javascript
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).

```javascript
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).

```javascript
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.

```javascript
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': [] }
```

---
_Source: https://npm.io/package/pico-redux · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._