Redux-Mutation

如果你只是用了 Redux，然后想过度到 redux-mutation，你完全可以使用 redux-mutation 替换 redux。迁移特别简单，请看迁移到 redux-mutation文章。

redux-mutaion是变异版的redux，基于 redux，保留 redux 所有原用法的基础上，定义了新用法（dva model 用方法）。redux-mutation 同时支持 async 和 generator 用法，这个得益于 redux-center。

redux-mutation 是基于redux-center，有一个center概念，这个可以移步 redux-center。（如果你用过 dva ，你可以理解 centers 为 effects）。

redux-mutation umd 包 gip 后只有 4.5KB（包括 redux-center 和 redux），所以不用担心会太大。

redux-mutation 默认用法相当于 dva model 的抽离，本人也会向 dva 的 model 的用法进行兼容（当然 redux-saga 用法兼容不了）。

由来

之所以单独抽离阿里 dva model 的原因如下：

• dva 官方并没有单独抽离 model 的用法，而是和其他框架逻辑耦合在一起。
• dva model 不兼容原生 redux 原生写法的，用法需全部迁移

浏览器兼容性

兼容 IE11、edge、谷歌、火狐、safar 等浏览器，其中 IE 需要而外支持promise。

Npm 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');
}

Umd Promise

<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>

入门使用

安装

需要而外安装redux >= 3.1.0，测试是基于 [email protected]，最低兼容到 [email protected] 版本，这个跟 applyMiddleware 有关。

npm i redux redux-mutation

使用例子

import { createStore } from 'redux-mutation';

const mutations = [
  {
    // 别名 state，兼容 dva
    initialState: 0,
    namespace: 'counter',
    reducers: {
      increment(state, action) {
        return state + 1;
      },
      decrement(state, action) {
        return state - 1;
      },
    },
    // 别名 effects，兼容 dva
    centers: {
      async increment_async(action, { put, call, select }) {
        await put({ type: 'increment' }, 'counter');
      },
    },
  },
];
const store = createStore(mutations);
store.subscribe(function() {
  console.log('rendered', 'You can render dom here.');
});
store.dispatch({ type: 'tester/increment_async' });

文档

• API 文档

在浏览器中使用 umd 方式

cdn 方式

• https://unpkg.com/redux-mutation/dist/redux-mutation.js
• https://unpkg.com/redux-mutation/dist/redux-mutation.min.js

const { createStore } = window.ReduxMutation相当于 es6 import:

import { createStore } from 'redux-mutation';

构建方式

git clone https://github.com/dog-days/redux-mutation
cd redux-mutation
npm install
#npm test（安装完成后，postinstall 会触发）
#npm run build （生成例子可用代码，安装完成后，postinstall 会触发）

然后在根目录下的 ./dist 文件夹获取相关的 js 文件。

基于源文件运行例子

请看这里。