# 自述

[![build status](https://travis-ci.org/dog-days/redux-mutation.svg?branch=master)](https://travis-ci.org/dog-days/redux-mutation) [![codecov](https://codecov.io/gh/dog-days/redux-mutation/branch/master/graph/badge.svg)](https://codecov.io/gh/dog-days/redux-mutation) [![npm package](https://badge.fury.io/js/redux-mutation.svg)](https://www.npmjs.org/package/redux-mutation) [![NPM downloads](http://img.shields.io/npm/dm/redux-mutation.svg)](https://npmjs.org/package/redux-mutation) ![](https://img.shields.io/badge/minzipped%20size-4.5kb-brightgreen.svg)

> 如果你只是用了 Redux，然后想过度到 redux-mutation，你完全可以使用 redux-mutation 替换 redux。迁移特别简单，请看[迁移到 redux-mutation](/zh-cn/other/migrating.md)文章。

`redux-mutaion`是变异版的`redux`，基于 [redux](https://redux.js.org/)，**保留** `redux` **所有原用法的基础上**，定义了新用法（dva model 用方法）。`redux-mutation` 同时支持 `async` 和 `generator` 用法，这个得益于 `redux-center`。

`redux-mutation` 是基于[redux-center](https://github.com/dog-days/redux-center)，有一个`center`概念，这个可以移步 `redux-center`。（如果你用过 dva ，你可以理解 centers 为 effects）。

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

## 由来

目前`redux-mutation`默认用法跟 `dva` 的 model 是很像的，因为公司前端项目用了阿里 [dva](https://github.com/dvajs/dva) 的 model 形式，本人也觉得这种用法挺不错。所以 `redux-mutation` 对外的用法目前是 `dva` 的 model 用法。

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

## 浏览器兼容性

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

### Npm Promise

首先安装 promise

```bash
npm i promise
```

然后添加下面代码

```javascript
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

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

## 入门使用

### 安装

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

```bash
npm i redux redux-mutation
```

### 使用例子

```javascript
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 文档](/zh-cn/api.md)

## 在浏览器中使用 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:

```javascript
import { createStore } from 'redux-mutation';
```

### 构建方式

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

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

## 基于源文件运行例子

请看[这里](https://github.com/dog-days/redux-mutation/tree/master/examples)。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://redux-mutation.gitbook.io/zh-cn/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
