dva.js 初探索

由于后台管理项目需要使用Ant Design Pro搭建,于是熟悉了一下结构,发现了dva。
阅读官网,我感觉dva是对redux-sage和react-router的再一层封装,将传统redux的action,reducer,store糅合在了一个文件中。

在dva里,数据只需要放在一个js文件的对象中,分为了namespace、state、effects、reducers、subscription。
数据文件会自动匹配上,不需要上面配置,js文件放入models文件夹里,数据就会自动加载进store,特别的高级。

namespace是当前的对象在总state中的键名,state数据,effects用于处理异步操作、执行多个action,reducers对当前数据进行修改操作,subscription是订阅,不过看官网实力没明白什么,好像是url修改了会触发订阅的事件。

export default {
    // 命名空间 即总state数据中的键名
    namespace: 'dva',

    // state
    state: {
         count:0,
    },

    // 用于处理action触发的异步操作
    effects: {
        *fetchCountNum({payload}, { call, put, select }) {
        // select可以用于获取state
        const state = select(state=>state);

        const num = yield call(/*异步函数*/);
        // 触发action执行reducers的方法
        yield put({
            type: 'countAdd',
            payload: num ,
        });
        // 可执行多个call或者put操作
        yield put({
            type: 'doSomething',
            payload: data,
            });
        },
    },

    // action触发的操作
    reducers: {
        countAdd(state, { payload }) {
            return {
                count: state.count + payload,
            };
        },
    },

    // 目前测试学习暂时没用到,也不太明白,官网示例太少了
    subscriptions: {
        setup({ history }) {
        // Subscribe history(url) change,
        // trigger `load` action if pathname is `/`
        return history.listen(({ pathname, search }) => {
            if (typeof window.ga !== 'undefined') {
                window.ga('send', 'pageview', pathname + search);
            }
        });
        },
    },
};

effects需要写generator 函数,现在用async/await蛮多的,不过这里的写法大致差不多,call用于执行异步的函数得到结果,put触发action,select可以取得state,除去call、put、select,还可以得到redux-saga里的方法,不过我技术没这么好。
在配置文件中还可以将dva-immer打开,可以直接对state赋值操作,上面的reducers可以写为以下

reducers: {
    countAdd(state, { payload }) {
    state.count += payload,
    },
}

不过这个dva-immer就更没有资料了,google也木有,在github的example里with-immer看出了一点端倪,但是有immer.js的其它方法吗?
dva里还提供了连接数据的connect,可以用装饰器写法@connect,感觉很不错。
感觉dva挺不错的,就是文档太简单了,尤其是api就只有寥寥几句文字描述。
昨天搭建好了worldpress,想常写写博客,但是这个页面风格也太丑了吧,代码块真是丑到极致…又不会设置,难受啊马飞!