redux-center
是 redux 异步操作中间件,redux-center
可以简单理解为redux-thunk
的升级版,进行了用法规范,可以作为redux-thunk
、redux-saga
、redux-promise
等的替代品。
redux-center
多了一层center
,center
层将业务代码分离出 action
层和 reducer
层,减少了代码耦合,对于后期维护和测试非常有益。
redux-center
目前应用于redux-mutation。
兼容 IE9、edge、谷歌、火狐、safar 等浏览器,其中 IE 需要而外支持promise
。
首先安装 promise
npm i promise
然后添加下面代码
if (typeof Promise === 'undefined') {
// Rejection tracking prevents a common issue where React gets into an
// inconsistent state due to an error, but it gets swallowed by a Promise,
// and the user has no idea what causes React's erratic future behavior.
require('promise/lib/rejection-tracking').enable();
window.Promise = require('promise/lib/es6-extensions.js');
}
需要而外安装redux >= 3.1.0
,测试是基于redux@4.0.1
,最低兼容到redux@3.1.0
版本,这个跟applyMiddleware
有关。
#因为是基于redux所以要安装redux
npm i redux redux-center
redux-center
支持async
和generator
使用方式。如果使用generator
则需要使用generatorsToAsync
进行适配处理。
import { createStore, combineReducers, applyMiddleware } from 'redux';
import createCenter from 'redux-center';
import generatorsToAsync from 'redux-center/lib/generators-to-async';
function counter(state = 0, { type, payload = {} }) {
const { value } = payload;
switch (type) {
case 'INCREMENT':
return state + value;
case 'DECREMENT':
return state - value;
default:
return state;
}
}
const centers = [
async function(action, { put, call, select }) {
switch (action.type) {
case 'INCREMENT_ASYNC':
await put({ type: 'INCREMENT' });
default:
}
},
];
const centerInstance = createCenter(combineCenters(centers));
const centerMiddleware = centerInstance.createCenterMiddleware();
const store = createStore(
combineReducers({ counter }),
applyMiddleware(centerMiddleware)
);
let clearRenderTimeout;
store.subscribe(function() {
console.log('counter:', store.getState());
});
// store.dispatch({ type: 'render' });
store.dispatch({ type: 'INCREMENT_ASYNC' });
更多使用情况./examples
文件夹下的例子。
center
的用法跟reducer
很像,所以center
的执行不能跟reucer
冲突,例如下面就是不合理的:
//伪代码
//reducer
function couter(state, action) {
switch (action.type) {
case 'same-action-type':
break;
default:
return state;
}
}
//centers
[
function(state, action) {
switch (action.type) {
case 'same-action-type':
break;
default:
return state;
}
},
];
上面两个case 'same-action-type'
都会执行,因为执行center
也会执行reducer
。
redux-mutation
基于redux-center
但是没有这个问题,因为redux-center
定义了新结构,把switch case
的条件转换成了函数名,然后就可以和reducers
做对比了。
有两种方式,第一种是使用 cdn,第二种就是直接在打包后的的./dist
文件中获取。
- https://unpkg.com/redux-center/dist/redux-center.js
- https://unpkg.com/redux-center/dist/redux-center.min.js
- https://unpkg.com/redux-center/dist/generators-to-async.js
- https://unpkg.com/redux-center/dist/generators-to-async.min.js
git clone https://github.com/dog-days/redux-center
cd redux-center
npm install
npm test
npm run build
然后在根目录下的./dist
文件夹获取相关的 js 文件。
请看这里。