Skip to content

Latest commit

 

History

History
103 lines (76 loc) · 2.96 KB

Readme.md

File metadata and controls

103 lines (76 loc) · 2.96 KB

redux-flo

Build status Git tag NPM version Code style

Redux style control flow middleware - inspired by haskel's free monad approach to io and co.

Installation

$ npm install redux-flo

Usage

import flow from 'redux-flo'
import fetchMiddleware, {fetch} from 'redux-effects-fetch'
import {createStore, applyMiddleware} from 'redux'

const store = createStore(identity, applyMiddleware(flo(), fetchMiddleware))
const dispatch = store.dispatch

// simple parallel

dispatch([
  fetch('google.com'),
  fetch('facebook.com')
]).then(res => res /* [google, facebook] */)

// simple serial

dispatch(function * () {
  yield fetch('google.com') // google
  return yield fetch('facebook.com')
}).then(res => res /* facebook */)

// complex
dispatch(function * () {
  //sync
  yield fetch('google.com') // google
  yield fetch('facebook.com') // facebook
  //parallel
  yield [fetch('heroku.com'), fetch('segment.io')] // [heroku, segment]
  return 'done'
}).then(res => res /* 'done' */)

API

flow (errorHandler, successHandler)

FLO middleWare.

  • errorHandler - handles errors in flows (defualts to throws)
  • successHandler - handles successes in flow (defaults to identity function)

Returns: redux style middleware

Flo is simple and powerful:

Functors and generators will be mapped and converted to a promise (basically a map-reduce).

toPromise(map(dispatch, action)).then(successHandler, errorHandler)

Promises and thunks are converted to a promise.

toPromise(action).then(successHandler, errorHandler)

All other types (mostly we are talking about plain objects here) are passed down the middleware stack.

Functors

Functors implement map. An array is a functor. A plain object is not. This is good, because we don't want Flo to handle plain objects. We can however coerce plain objects into functors, letting you define custome behavior for Flo. Here's an example:

import flow from 'redux-flo'
import fetchMiddleware, {fetch} from 'redux-effects-fetch'
import bind from '@f/bind-middleware'
import ObjectF from '@f/obj-functor'

let dispatch = bind([flow(), fetchMiddleware])

dispatch(function * () {
  yield ObjectF({
    google: fetch('google.com'),
    facebook: fetch('facebook.com')
  }) // => {google: google, facebook: facebook}
})

License

MIT