redux-hom
redux HigherOrderMiddleware
Installation
npm install --save redux-hom
Usage
define middleware
const applyMiddleware = ;const higherOrderMiddleware = ; const services = id: 'featureA' middleware: featureMiddlewareA id: 'featureB' middleware: featureMiddlewareB; ...middlewares ;
define action
const normalAction = type: 'DO_NORMAL'; const featureAction = type: 'NEED_SOME_FEATURE' $featureA: ; const multiFeatureAction = type: 'NEED_MULTI_FEATURE' $featureA: $featureB: ;
if you want diy match
const services = id: 'featureA' middleware: featureMiddlewareA `:` const action = type: 'ACTION:featureA:featureB'
service example
// const action = {// type: 'test',// $storage: 'someKey',// data: 'someValue'// }const storageMiddleware = { console; // localStorage.setItem(action['$storage'], action.data); return ;}; // const action = {// type: 'test',// $batch: ['step-1', 'step-2']// };const easyBatchMiddleware = { const nextAction = ; const $batch = action; $batch; return nextAction;}; // const action = {// type: 'test',// $batch: [// 'step-1',// action => ({ type: `${action.type}:left` }),// async action => {// function timeout(ms) {// return new Promise(resolve => setTimeout(resolve, ms));// }// const asyncFunc = () => new Promise((resolv, reject) => {// setTimeout(// resolv({// type: `${action.type}:async`// })// , 2000);// });// const asyncAction = await asyncFunc();// return asyncAction;// }// ]// };const batchMiddleware = { const AsyncFunction = async {}constructor; const nextAction = ; const $batch = action; $batch; return nextAction;}; const services = id: 'storage' middleware: storageMiddleware id: 'batch' middleware: batchMiddleware; // axios fetchconst fetchMiddleware = { const requestBody onSuccess = type: `:success` type: `:error` } = action$fetch; // server.request(requestBody) // .then((...resp) => store.dispatch(onSuccess(...resp))) // .catch((...resp) => store.dispatch(onError(...resp))) return ;};
Why?
It's a extension for action -> middleware
here's the history
for example 1: storage case
1. you want to storage
const someFunction = { // ... localStorage}
2. you think you should use middleware
const storageMiddleware = { return ;}
2.1 and then
const storageMiddleware = { return ;}
3 switch to regexp
const storageMiddleware = { const reg = /:success$/; const match = actiontype || ; return ;} const fetchSuccess = type: `:success` ...data
4 implements action
const storageMiddleware = { localStorage; return }
for more examples
; // wrap actionsconst doThing = const doOther = // wrap reducerconst store = // dispatch wrapped function
// serialize in batchMiddleware
;;; const client = axios; let store = // multi case const client2 = axios ;
const client1Middleware = { const request onSuccess = store // you can set default here {...} } = action$client1; ; return ;} // it depends on how you write your middleware
Motivation
higherOrderComponent
<Parent> <Child/></Parent>
higherOrderReducer
TODO
- more detail about usage
- need example
- try to merge feature like
redux-batch-action
orredux-pack
- add circle ci
- maybe something more
- finish them & build module
- testing common services