Redux Delta

Description

Helper methods and cli to remove the boilerplate of Redux project setup and development.

Examples

Setup

1. npm install redux-delta --save
2. cd <src directory>
3. redux-delta create

Usage

1. Create Actions

// ./store/actions/counter.js
import { createAction as ca } from "redux-delta"

export const inc = ca("INCREMENT")
export const dec = ca("DECREMENT")

2. Create Reducer

redux-delta reducer counter

// ./store/reducers/counter.js
import { createReducer as cr } from "redux-delta"
import { inc, dec } from "../actions/counter"

export default cr({ count: 0 }, [
  inc.case(({ count }, v = 1) => ({ count: count + v })),
  dec.case(({ count }, v = 1) => ({ count: count - v }))
])

3. Dispatch Actions

// ./components/counter.js
import { connect } from "react-redux"
import { inc, dec } from "../store/actions/counter"

export default connect(
  ({ counter }) => ({ counter }),
  { inc, dec }
)

4. Higher Order Deltas

Higher order deltas are common redux patterns that can be reused and extended.

1. Toggle Delta

• Schema

{
  "active": boolean
}

• Usage

import { createStore } from "redux"
import { toggleDelta } from "redux-delta/lib/dx/toggle"

const toggle = toggleDelta("MENU", { active: false })
const store = createStore(toggle)
store.getState() // { active: false }
store.dispatch(toggle.toggleActive())
store.getState() // { active: true }
store.dispatch(toggle.setActive(false))
store.getState() // { active: false }
store.dispatch(toggle.setActive(true))
store.getState() // { active: true }

2. Async Delta

• Schema

{
  "loading": boolean
  "data": D | null
  "error": string
}

• Usage

import { createStore } from "redux"
import { asyncDelta } from "redux-delta/lib/dx/async"

const luke = asyncDelta("Luke Skywalker")

const store = createStore(luke)

store.dispatch(luke.setLoading(true))
store.dispatch(luke.setFailure("")) // Clear out any previous errors
store.getState() // { loading: true, data: null, error: "" }

fetch(`https://swapi.co/api/people/0?format=json`)
  .then(res => res.json())
  .then(res => {
    store.dispatch(luke.setLoading(false))
    store.dispatch(luke.setSuccess(res))
    store.getState() // { loading: false, data: res, error: "" }
  })
  .catch(e => {
    store.dispatch(luke.setLoading(false))
    store.dispatch(luke.setFailure(e.message))
    store.getState() // { loading: true, data: null, error: "The API has succumb to the darkside" }
  })

5. Compose Higher Order Deltas

import composeDeltas from "redux-delta/lib/dx"
import { toggleDelta } from "redux-delta/lib/dx/toggle"
import { asyncDelta } from "redux-delta/lib/dx/async"

const activeAsyncΔ = composeDeltas(toggleDelta, asyncDelta)
const unique = activeAsyncΔ("unique/identifier/", initial)
const store = createStore(userinfo)