alley

Tree-based action logger and effects library

Motivation

Reduxes middleware is popular and generic, but quite underpowered. Actions like making AJAX requests, connecting websockets, and setting cookies often need to be asynchronous. While you can do certainly do these things in Redux's middleware, it's flow is mind-bending because Redux's middleware is synchronous, so you need to internally re-dispatch to achieve asynchronous behavior.

Let's take some of the lessons we learned on the server with asynchronous http frameworks like Koa and make them compatible on the wider web using Promises. This will give us more powerful middleware to work with in the browser.

Example

const Alley = require('alley')
const { send, use } = Alley()
 
// root middleware for things like logging
use(async (action, next) => {
  console.log('->', action.type, action.payload)
  await next()
  console.log('<-', action.type, action.payload)
})
 
// any sort of http request specifc logging, timing, etc.
use('http', async (action, next) => {
  console.time('request')
  await next()
  console.timeEnd('request')
})
 
// perform a POST request
use('http:post', async (action, next) => {
  // ...
})
 
// perform a GET request
use('http:get', async (action, next) => {
  let res = await fetch(action.payload.url)
  action.payload.response = res
  await next()
})
 
// send an action
// steps: root -> http -> http:get -> http -> root
let action = await send('http:get', {
  url: 'http://google.com'
})

Install

npm install alley

Documentation

use([namespace], fn)

Create an action handler with an optional namespace.

The namespaces are arranged in a tree structure, separated by colons.

send(namespace|action, [payload])

Send an action down, then back up the tree. The flow is conceptionally similar to Koa, so understanding Koa's model would be a good place to start.

Send supports a couple different formats and automatically handles error types. For now, it's best to look at the tests for usage examples.

Send returns a Promise that will resolve after the flow completes or there's an error that's thrown.

Test

npm test

License

MIT