0.0.0 • Published 5 years ago
redux-derive-middleware v0.0.0
derive middleware
- 用于从指定的action,在满足一定条件下,衍生出一个新的action,从而达到针对一定条件下的扎堆action在reducer中进行统一处理,而不用对每一个action都进行判断
举例
截取当下常见的redux-promise-middle和type-to-reducer的组合
export default typeToReducer(
{
[GET_LIST]: {
[pending]: state => state.set('getList', true),
[fulfilled]: state => state.set('getList', false),
[rejected]: state => state.set('getList', false)
}
},
initialState
);
这里代码比较简化,但是可以看到有很多这样的场景里对一个异步请求的pending状态和非pending状态都需要体现在页面的动态更新上,因此每一个请求都对应了pending、fulfilled、rejected三个不同的处理。 使用deriveMiddleware,派发统一的action,标记该actionType的isFetching的值,这样便可以在全局的reducer来处理了,如下:
const GLOBAL_ASYNC_TYPE = 'gloal_async_type';
const deriveWare = deriveMiddleware(action => {
const reg1 = new RegExp(`${typeDelimiter}${promiseTypeSuffixes.pending}$`);
const reg2 = new RegExp(`${typeDelimiter}${promiseTypeSuffixes.fulfilled}$`);
const reg3 = new RegExp(`${typeDelimiter}${promiseTypeSuffixes.rejected}$`);
const actionType = action.type;
if (reg1.test(actionType)) {
return {
...action,
actionType: actionType.replace(reg1, ''),
type: GLOBAL_ASYNC_TYPE,
isFetching: true
};
} else if (reg2.test(actionType) || reg3.test(actionType)) {
return {
...action,
actionType: actionType.replace(reg2, '').replace(reg3, ''),
type: GLOBAL_ASYNC_TYPE,
isFetching: false
};
}
});
function appReducer(state = initialState, action) {
switch (action.type) {
case GLOBAL_ASYNC_TYPE:
let { actionType, isFetching } = action;
return state.set(actionType, isFetching);
default:
return state;
}
}
0.0.0
5 years ago