Symbol.iterator & object-rest-spread

Symbol.iterator-object-rest-spread.md

Symbol.iterator & object-rest-spread

what's this exactly mean?

...createLoading({obj})

Is it ES6 destructuring assignment?

// 1. Initialize
const app = dva(
    {
        ...createLoading(
            {
                effects: true
            }
        ),
        history: browserHistory,
        onError(error) {
            message.error(error.message);
        }
    }
);

    
//

https://github.com/dvajs/dva-loading/issues/22

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

http://www.benmvp.com/learning-es6-enhanced-object-literals/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

http://es6-features.org/#SpreadOperator

Symbol.iterator

[Symbol.iterator] is not a function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator

https://stackoverflow.com/questions/41586701/es6-symbol-iterator-is-not-a-function-with-an-array

https://stackoverflow.com/questions/29885220/using-objects-in-for-of-loops

object-rest-spread

http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html

https://github.com/tc39/proposal-object-rest-spread

https://github.com/dvajs/dva-loading/issues/22

https://github.com/dvajs/dva-loading/issues/22

import {query, logout} from '../services/app';
import {routerRedux} from 'dva/router';
import {parse} from 'qs';
import {config} from '../utils';
const {prefix} = config;

export default {
    namespace: 'app',
    state: {
        user: {},
        menuPopoverVisible: false,
        siderFold: localStorage.getItem(`${prefix}siderFold`) === 'true',
        darkTheme: localStorage.getItem(`${prefix}darkTheme`) === 'true',
        isNavbar: document.body.clientWidth < 769,
        navOpenKeys: JSON.parse(localStorage.getItem(`${prefix}navOpenKeys`)) || []
    },
    subscriptions: {
        setup({dispatch}) {
            dispatch({type: 'query'});
            let tid;
            window.onresize = () => {
                clearTimeout(tid)
                tid = setTimeout(() => {
                    dispatch({type: 'changeNavbar'});
                }, 300);
            };
        }
    },
    effects: {
        *query(
            {payload},
            {call, put}
        ){
            const data = yield call(query, parse(payload));
            if (data.success && data.user) {
                yield put({
                    type: 'querySuccess',
                    payload: data.user
                });
                if (location.pathname === '/login') {
                    yield put(routerRedux.push('/dashboard'));
                }
            }else {
                if (config.openPages && config.openPages.indexOf(location.pathname) < 0) {
                    let from = location.pathname;
                    window.location = `${location.origin}/login?from=${from}`;
                }
            }
        },
        *logout (
            {payload},
            {call, put}
        ){
            const data = yield call(logout, parse(payload));
            if (data.success) {
                yield put({ type: 'query' });
            } else {
                throw (data);
            }
        },
        *changeNavbar (
            {payload}, 
            {put, select}
        ){
            const { app } = yield(select(_ => _));
            const isNavbar = document.body.clientWidth < 769;
            if (isNavbar !== app.isNavbar) {
                yield put({ type: 'handleNavbar', payload: isNavbar });
            }
        }
    },
    reducers: {
        querySuccess (state, { payload: user }) {
            return {
                ...state,
                user
            };
        },
        switchSider (state) {
            localStorage.setItem(`${prefix}siderFold`, !state.siderFold);
            return {
                ...state,
                siderFold: !state.siderFold
            };
        },
        switchTheme (state) {
            localStorage.setItem(`${prefix}darkTheme`, !state.darkTheme);
            return {
                ...state,
                darkTheme: !state.darkTheme
            };
        },
        switchMenuPopver (state) {
            return {
                ...state,
                menuPopoverVisible: !state.menuPopoverVisible
            };
        },
        handleNavbar (state, { payload }) {
            return {
                ...state,
                isNavbar: payload
            };
        },
        handleNavOpenKeys (state, { payload: navOpenKeys }) {
            return {
                ...state,
                ...navOpenKeys
            };
        }
    }
}

dva

https://github.com/dvajs/dva/blob/master/README_zh-CN.md

https://gist.github.com/xgqfrms-gildata/cbebf1e20de3ad4d3491cc417aaf547a#gistcomment-2138996

querystring parsing

qs

一个查询字符串解析和字符串库，具有一些额外的安全性。

https://www.npmjs.com/package/qs

React State

https://gist.github.com/xgqfrms-GitHub/a9869ffb1202562991cfbf77d67a95ef#gistcomment-2139610