redux-center

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，测试是基于[email protected]，最低兼容到[email protected]版本，这个跟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做对比了。

文档

• API 文档

在浏览器中使用 umd 方式

有两种方式，第一种是使用 cdn，第二种就是直接在打包后的的./dist文件中获取。

cdn 方式

• 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 文件。

基于源文件运行例子

请看这里。