blosm

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.

Blosm	Redux
const { createStore } = require('redux') const blosm = require('blosm') const db = blosm({ food: { tacos: [] } }) db.on('add-taco', s => s.food.tacos) .do((tacos, data) => tacos.push(data)) const store = createStore(db.reducer)	const { createStore } = require('redux') const initialState = { food: { tacos: [] } } 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.

Blosm	Redux
const { createStore } = require('redux') const blosm = require('blosm') const db = blosm({ food: { favorite: 'pasta', type: 'italian' } }) db.on('favorite-food', s => s.food) .do(data => data) const store = createStore(db.reducer)	const { createStore } = require('redux') const initialState = { food: { favorite: 'pasta', type: 'italian' } } 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 maps

Modifying sets

Modifying primitives

To modify primitives, return the changed value.

Blosm	Redux
const { createStore } = require('redux') const blosm = require('blosm') const db = blosm({ person: { age: 22 } }) db.on('birthday', s => s.person.age) .do((age, data = 1) => age + data) const store = createStore(db.reducer)	const { createStore } = require('redux') const initialState = { person: { age: 22 } } 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 })

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 :)

License

MIT