blosm v0.1.0
blosm
Redux easy mode. Kill the boilerplate and focus on the logic.
Features simple reducer functions. Blosm automatically takes care of merging a new copy of the changed state. Internally Blosm uses Snoman for native immutable data structures.
Installing
npm i blosm
Usage
const { createStore } = require('redux')
const blosm = require('blosm')
// init blosm with the initial app state
const db = blosm({
tacos: []
})
// register actions with .on() and its corresponding reducer with .do()
db.on('add-taco')
.get(s => s.tacos)
.do((tacos, data) => tacos.push(data))
// shorthand version
db.on('add-taco', s => s.tacos).do((tacos, data) => tacos.push(data))
// pass the master reducer function to redux
const store = createStore(db.reducer)
Comparison with native Redux
Modifying arrays
Any array prototype methods that would normally mutate the array are proxied and will instead return a new copy of the array with the changes.
db.on('add-taco', s => s.food.tacos) .do((tacos, data) => tacos.push(data))
const store = createStore(db.reducer)
function db (state = initialState, action) { switch (action.type) { case 'add-taco': const tacosCopy = state.tacos.food.slice() tacosCopy.push(action.data) return Object.assign({}, state, { food: { tacos: tacosCopy } }) default: return state } }
const store = createStore(db)
Modifying objects
To modify an object, return an object containing the changes. It is also possible to use Snoman object convenience methods.
db.on('favorite-food', s => s.food) .do(data => data)
const store = createStore(db.reducer)
function db (state = initialState, action) { switch (action.type) { case 'favorite-food': return Object.assign({}, state, { food: { favorite: action.data.favorite type: action.data.type } }) default: return state } }
const store = createStore(db)
Modifying sets
Modifying primitives
To modify primitives, return the changed value.
db.on('birthday', s => s.person.age) .do((age, data = 1) => age + data)
const store = createStore(db.reducer)
function db (state = initialState, action) { switch (action.type) { case 'birthday': return Object.assign({}, state, { person: { age: (state.person.age + action.data.age) || 1 } }) default: return state } }
const store = createStore(db)
Documentation
blosm(initialState)
Returns a new Blosm object to configure state reducers
- initialState
Object
- Initial state for application
const app = blosm({ name: 'lucy', age: 22 })
blosm().on(action)
Registers a new action with the Blosm object
- action
string
- Name of the action type
const app = blosm({ name: 'lucy', age: 22 })
app.on('birthday')
blosm().on().get(selector)
Specifies a selector to query your object graph. A selector minimizes the need of working with the entire object structure in your reducer. A selector will also be used to construct an object diff for Redux
- selector
function
- A function selector querying your object graph. e.g.state => state.food.mexican.tacos
const app = blosm({ name: 'lucy', age: 22 })
app.on('birthday').get(s => s.age)
blosm().on().do(updateReducer)
Specifies the update function to perform on the specified action. In Redux terminology this would the reducer corresponding to a particular action.
- updateReducer
function
- A reducer function for the specified action. Whatever is returned from this function will be used to construct a new object for Redux. The updateReducer function receives two parameters:- item - The item queried in the selector via
get()
- data - The data sent along the dispatch method - i.e.
dispatch({ type: 'birthday', data: 1 })
- item - The item queried in the selector via
const app = blosm({ name: 'lucy', age: 22 })
app.on('birthday').get(s => s.age).do((age, data) => age + data)
blosm().reducer
Returns the smart reducer to be passed into Redux createStore
method.
const app = blosm({ name: 'lucy', age: 22 })
app.on('birthday').get(s => s.age).do((age, data) => age + data)
const store = redux.createStore(app.reducer)
Immutable data structures supported
- Object
- Array
- Map
- Set
Development
Install necessary dependencies
npm i
Run the tests
npm test
Contributing
Contributions welcome. Submit a Pull Request :)