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()
use(async (action, next) => {
console.log('->', action.type, action.payload)
await next()
console.log('<-', action.type, action.payload)
})
use('http', async (action, next) => {
console.time('request')
await next()
console.timeEnd('request')
})
use('http:post', async (action, next) => {
})
use('http:get', async (action, next) => {
let res = await fetch(action.payload.url)
action.payload.response = res
await next()
})
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