Vanex支持插件机制，使用的方式如下：

import { start, use } from 'vanex';

import effectPlugin from './effect-plugin';

use(effectPlugin);

// start代码

API

onStateChange

用于监听数据发生改变的时候的触发回调。格式如下：

export default {
    onStateChange: [event => {
        console.log(event);
    }]
};

onEffect

用于处理异步执行执行前(before)、后(after)、错误(error)以及过滤哪些effects执行该回调，它在执行的时候其实是以中间件的形式来执行的。如果有类似于每次请求都自带csrfToken的需求，则可以在before钩子函数中组装。

具体使用如下：

// Before exec action
function preLogger({
    type,
    payload
}) {
    console.log(`[${type}] params: `, payload);

    payload。csrfToken = 'xxx'; // 这里的更改会对请求参数生效

    return payload;
}

// Action exec fail
function errorLogger({
    type,
    payload
}) {
    console.log(`[${type}] error: `, payload.message);
    return payload;
}

// After exec action
function afterLogger({
    type,
    payload
}) {
    console.log(`[${type}] result: `, payload);
    return payload;
}

export default {
    filter({
            type
        }) {
        return /^User/.test(type); // 只针对Model名字是User的进行下面钩子函数的执行
    },
    before: preLogger,
    after: afterLogger,
    error: errorLogger,
};

onAction

用于在执行syncs Action之后触发。格式如下：

export default {
    onAction: [(
        actionName,
        actionArgs,
        result) => {
            console.log(`当前执行Action的名字：${actionName}`);
            console.log(`当前执行Action的参数：${actionArgs}`);
            console.log(`当前执行Action的结果：${result}`);
        }]
};

getActionState

这个并不是Vanex插件，但是用于解决在组件中获取当前model中某个effect是否正在发送请求的问题，而这个状态可以用于方便的控制Loading组件是否可见。因为这种需求非常普遍，所以Vanex直接内置到内部实现中。使用示例如下：

const {
    user 
} = this.props;

const {
    loading: loginLoading,
    error: loginError 
} = user.getActionState('user/login');