Redux Delta
Description
Helper methods and cli to remove the boilerplate of Redux project setup and development.
Setup
npm install redux-delta --save
cd <src directory>
redux-delta create
Usage
1. Create Actions
import { createAction as ca } from "redux-delta"
export const inc = ca("INCREMENT")
export const dec = ca("DECREMENT")
2. Create Reducer
redux-delta reducer counter
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
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
import { createStore } from "redux"
import { toggleDelta } from "redux-delta/lib/dx/toggle"
const toggle = toggleDelta("MENU", { active: false })
const store = createStore(toggle)
store.getState()
store.dispatch(toggle.toggleActive())
store.getState()
store.dispatch(toggle.setActive(false))
store.getState()
store.dispatch(toggle.setActive(true))
store.getState()
2. Async Delta
{
"loading": boolean
"data": D | null
"error": string
}
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(""))
store.getState()
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()
})
.catch(e => {
store.dispatch(luke.setLoading(false))
store.dispatch(luke.setFailure(e.message))
store.getState()
})
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)