redux-delta
v0.1.3
Published
Helper methods and cli to remove the boilerplate of Redux project setup and development.
Downloads
19
Readme
Redux Delta
Description
Helper methods and cli to remove the boilerplate of Redux project setup and development.
Examples
Setup
npm install redux-delta --save
cd <src directory>
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)