React（之四）其它框架状态管理及框架

| dva
| redux
| redux-saga
| redux-thunk
| Ant Design Pro

状态管理框架

https://cn.mobx.js.org/

// redux-saga 中间件
https://redux-saga-in-chinese.js.org/    

// dva
https://dvajs.com/guide/#%E7%89%B9%E6%80%A7        dva

redux-saga

redux-saga 是一个用于管理 Redux 应用异步操作的中间件（又称异步 action），Sagas是通过Generator函数来创建

Reducers 负责处理 action 的 state 更新
Sagas 负责协调那些复杂或异步的操作

一、安装

    $ npm install --save redux-saga


二、使用

    sagas.js   // 创建一saga.js文件

    main.js

        import { createStore, applyMiddleware } from 'redux'
        import createSagaMiddleware from 'redux-saga'

        import reducer from './reducers'
        import mySaga from './sagas'

        // 创建saga中间件
        const sagaMiddleware = createSagaMiddleware()

        // 加到createStore中
        const store = createStore(
            reducer,
            applyMiddleware(sagaMiddleware)
        )

        // 运行 saga
        sagaMiddleware.run(mySaga)


三、核心函数

    1、takeEveny('actionName', 执行的saga函数) - type的action触发，就执行goAge()函数

    2、takeLatest()

    3、createSagaMiddleware()：创建一个Reudx中间件，将Sagas与Redux Store链接起来

    4、middleware.run()：运行sagas，


四、Effect 

    import { call, put, takeEveny } from 'redux-saga/effects'

    1、take()：监听未来的action

        function* watchFetchData() {
            while(true) {
                // 监听一个type为 'FETCH_REQUESTED' 的action的执行，直到等到这个Action被触发，才会接着执行下面的 yield fork(fetchData)  语句
                yield take('FETCH_REQUESTED');
                yield fork(fetchData);
            }
        }

    2、takeEveny(): 

        function* rootSaga() {     // 在store.js中，执行了 sagaMiddleware.run(rootSaga)
            yield takeEvery("ADD_SAGA", addSagas)   // 如果有对应type的action触发，就执行goAge()函数
        }

    3、put()：发送action的effect，简单把它理解为dispatch

        export function* toggleItemFlow() {
            let list = []
            // 发送一个type为 'UPDATE_DATA' 的Action，用来更新数据，参数为 `data：list`
            yield put({
                type: actionTypes.UPDATE_DATA,
                data: list
            })
        }

    4、call()：简单的理解为就是可以调用其他函数的函数

        export const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

        export function* removeItem() {
            try {
                // 这里call 函数就调用了 delay 函数，delay 函数为一个返回promise 的函数
                return yield call(delay, 500)
            } catch (err) {
                yield put({type: actionTypes.ERROR})
            }
        }

    5、fork()：用来调用其它函数，是一个非阻塞函数，

        export default function* rootSaga() {
            // 下面的四个 Generator 函数会一次执行，不会阻塞执行
            yield fork(addItemFlow)
            yield fork(removeItemFlow)
            yield fork(toggleItemFlow)
            yield fork(modifyItem)
        }

    6、select()：获取Store中的state值

        let tempList = yield select(state => {
            debugger;
        })


https://www.jianshu.com/p/7cac18e8d870
https://github.com/redux-saga/redux-saga/ 官网
https://redux-saga-in-chinese.js.org/ 中文在线文档
https://segmentfault.com/a/1190000007248878 Redux异步方案选型
https://www.jianshu.com/p/f3c7594c4fb4 redux-saga 初级学习教程
https://github.com/Pines-Cheng/blog/issues/9 从redux-thunk到redux-saga实践
http://yanqiw.github.io/react/2017/03/05/redux-saga.html Redux Saga实践

dva.js

dva是redux和redux-saga的数据流文案，还内置了react-router和fetch的一个应用框架

一、安装

    $ sudo npm i dva-cli -g

    $ sudo dva new dva-quickstart


二、定义Model

    把一个领域的模型管理起来，包含同步更新state的reducers，处理异步逻辑

    export default {
        namespace: 'products',  // 表示在全局 state 上的 key，最好与组件名相同保持统一
        state: {},                            // 初始值
        reducers: {                            // 等同于 redux 里的 reducer，接收 action，同步更新 state
            save(state, action) {
                return {
                    ...state,
                    data: action.payload,
                };
            },
        }
    }


三、connect 起来

    通过connect将model和component联接起来

    class products extends Componet {
        ... 

        render {
            const { dispatch, products } = this.props

            return (
                <div></div>
            )
        }
    }

    export default connect(({ products }) => ({
        products,
    }))(Products);


四、models

    dispatch

    Reducer(state, action): 

    effects: 异步操作，底层引入redux-sagas，采用了generator

    Subscription: 

    Router: 


五、整理

    1、调用同步和异步

        调用reducers内的方法是同步，直接改变指定state的值

        调用effects内的方法是异步的调用，调取成功后在调用reducers中的方法来改变state


安装后目录结构:
|- mock                        // mock
|- node_modules        // 包
|- package.json        
|- public
|- src
        |- asserts            // 静态资源，打包会经过webpack处理
        |- components        // 存放React组件，公用的无状态组件
        |- models                // 模型文件
        |- routes                // 存放需要connect model的路由组件
        |- services            // 存放服务文件，一般是网络请求
        |- utils                // 工具库
        |- router.js        // 路由文件
        |- index.js            // 项目入口
        |- index.css
|- .editorconfig        // 编辑器配置文件
|- .eslintrc
|- .gitignore
|- .roadhogrc.mock.js    // Mock配置文件
|- .webpackrc                //  自定义的webpack配置文件


https://dvajs.com/        // dva

Ant Design Pro

安装:
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project
$ npm install

启动服务:
$ npm start                            // mock数据
$ npm start:no-mock         // 不走mock数据
$ npm run prettier            // 格式化代码
$ npm run lint-staged        // 检测

构建:
$ npm run build


一、路由

    脚手架默认提供了两种布局模板：基础布局 - BasicLayout 以及 账户相关布局 - UserLayout

    router.config.js

    1、name、icon - 菜单项和图标

    2、hideChildrenInMenu - 菜单子路由是否展示

    3、hideInMenu - 菜单中不展示这个路由

    4、authority - 指写可以看当前菜单的用户 Array

    // app
    {
        path: '/',
        component: '../layouts/BasicLayout',
        Routes: ['src/pages/Authorized'],
        authority: ['admin', 'user'],
        routes: [
            {
                path: '/dashboard',
                name: 'dashboard',
                icon: 'dashboard',
                hideChildrenInMenu: true,                    // 隐藏所有子菜单，但这块需要加一个对应dashboard路由的component: './Dashboard/Analysis'
                routes: [
                    {
                        path: '/dashboard/analysis',
                        name: 'analysis',
                        component: './Dashboard/Analysis',
                    },
                    ...
                ],
            }
        ]
    }
    // new 这里是新增布局
    {
        path: '/new',
        component: '../layouts/new_page',
        routes:[...]
    },


二、config.js 配置代理到后端服务器

    {
        proxy:{
            '/server/api/': {
                target: 'https://preview.pro.ant.design/',
                changeOrigin: true,
                pathRewrite: { '^/server': '' }, // /server/api/currentUser -> /api/currentUser
            },
        }
    }

三、支持SASS

    $ npm i node-sass sass-loader --save            // 安装依赖


四、页面添加 dva

    modle - 分两种: 1、全局models（存在/src/models/）   2、页面models （存在于每个业务下/models 不能被其他页面所引用）

    service - 请求数据


五、请求的过程

    1、UI 组件交互操作

    2、调用 model 的 effect

    3、调用统一管理的 service 请求函数

    4、使用封装的 request.js 发送请求

    5、获取服务端返回

    6、然后调用 reducer 改变 state

    7、更新 model


六、Mock

    export default {
        // 支持值为 Object 和 Array
        'GET /api/users': { users: [1, 2] },

        // GET POST 可省略
        '/api/users/1': { id: 1 },

        // 支持自定义函数，API 参考 express@4
        'POST /api/users/create': (req, res) => { res.end('OK'); },
    };

    1、可以引用Mock.js第三方库

        import mockjs from 'mockjs';

        export default {
            // 使用 mockjs 等三方库
            'GET /api/tags': mockjs.mock({
                'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
            }),
        };

七、自定义主题

    config/config.js文件

    theme: {
        'font-size-base': '14px',
        'badge-font-size': '12px',
        'btn-font-size-lg': '@font-size-base',
        'menu-dark-bg': '#00182E',
        'menu-dark-submenu-bg': '#000B14',
        'layout-sider-background': '#00182E',
        'layout-body-background': '#f0f2f5',
    };


八、项目总结

    1、Mock数据不能在生产环境使用，只能在开发环境

    2、使用动态路由时切换时取不到参数，见下面UMI动态路由解决方法

目录

├── config              # umi 配置，包含路由，构建等配置
│   ├── config.js                        #    构建
│   ├── plugin.config.js
│   ├── router.config.js      # 路由配置文件
├── mock                # 本地模拟数据
├── public
│   └── favicon.png         # Favicon
├── layouts                            # 框架页面
├──     ├── BasicLayout                # Basic框架页
├──     ├── Header                        # 头  
├──   ├── Footer                        # 尾
├── locales
|          ├── zh-CN
|            |            ├── menu.js            # 配置显示在菜单对应路由的中文名
├── src                                    # 重要
│   ├── assets              # 本地静态资源
│   ├── components          # 业务通用组件
│   │       ├── GlobalHeader        # 顶部右侧部分内容
│   ├── e2e                 # 集成测试用例
│   ├── layouts             # 通用布局
│   │            ├── BasicLayouts      # 基础布局
│   ├── models              # 全局 dva model
│   |            ├── menu.js                    # 菜单处理过滤
│   |            ├── login.js                # 登录请求
│   ├── pages               # 业务页面入口和常用模板
│   │            ├── document.ejs        # 首页模板
│   │            ├── User                        # Login/Register  登录和注册组件
│   ├── services            # 后台接口服务
│   ├── utils               # 工具库
│   ├── locales             # 国际化资源
│   ├── global.less         # 全局样式
│   ├── defaultSettings.js    # 配置菜单样式等
│   └── global.js           # 全局 JS
├── utils                                # 工具
├──     ├── request.js                # 封装Ajax请求
├──     ├── Authorized                # 授权
├── models                            # 全局
├──     ├── menu                            # 菜单的配置和过滤
├──   ├── 
├── tests               # 测试工具
├── README.md
└── package.json

Umi.js

umi，中文可发音为乌米, 内置了react、react-router，以路由为基础，支持next.js的约定式路由

一、安装

    $ yarn global add umi     // 安装 umi -v 来查看版本

    $ mkdir myumi && cd myumi

    1、脚手架创建

        $ yarn creat umi                 // 通过creat-umi脚手架创建，其实就安装了 Ant Design Pro 的简版没有components


    2、普通创建

        $ umi g page index            // 简单创建页面

            umi g page users

        $ umi dev            // 启动服务

        $ umi build        // 构建


二、路由

    约定式路由 - 启动服务后在pages下产生一个.umi临时目录里面有router.js，umi 会根据 pages 目录自动生成路由配置

    配置式路由 - 如果使用配置可以在，config/router.config.js

    1、路由跳转: 

        import Link from 'umi/link'            // 加载link

        export default function(){
            return (
                <div>
                    <Link to="/user">跳转到用户</Link>
                </div>
            )
        }

        命令式:
            function goToListPage() {
                router.push('/list');
            }

    2、动态路由

        umi约定 带 $ 前缀的目录或文件为动态路由

        + pages/
            + $post/
                - index.js
                - comments.js
            + users/
                $id.js
            - index.js

        [
            { path: '/', component: './pages/index.js' },
            { path: '/users/:id', component: './pages/users/$id.js' },
            { path: '/:post/', component: './pages/$post/index.js' },
            { path: '/:post/comments', component: './pages/$post/comments.js' },
        ]

        注意: 动态路由切换时不会在调用componentWillMount，需要在componentDidUpdate来侦听

             state = {
                chartId: ''
            };

            componentDidUpdate(){
                const { computedMatch } = this.props;
                const { chartId } = this.state;

                if(chartId !== computedMatch.params.id){
                    this.initChartList();
                }
            }

            initChartList(){
                const { dispatch, computedMatch } = this.props;
                console.log(computedMatch.params.id)

                this.setState({
                    chartId: computedMatch.params.id
                })

                dispatch({
                    type: 'chartData/getChartsData',
                    payload: {
                        pageId: computedMatch.params.id
                    }
                });
            }


    3、路由嵌套

        配置routers

        export default {
            routes: [
                { path: '/users', component: './users/_layout',
                    routes: [
                        { path: '/users/detail', component: './users/detail' },
                        { path: '/users/:id', component: './users/id' }
                    ]
                },
            ],
        };

    4、权限

        PrivateRoute.js来渲染/list

    https://umijs.org/zh/guide/router.html#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1


三、Mock 数据

    let agentDataList = [...]
    function getAgents(req, res) {
        const dataSource = agentDataList;
        const result = {
            list: dataSource,
            total: dataSource.length,
        };
        return res.json(result);
    }

    export default {
        'POST /api/arbitration/agent/query': getAgents,
    }

    --- 可以引入mock.js ---
    import mockjs from 'mockjs';
    export default {
        // 使用 mockjs 等三方库
        'GET /api/tags': mockjs.mock({
            'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
        }),
    };

antdPro 流程

一、app.js入口

    // 获取权限路由，也可以在这添加路由
    fetch('/api/auth_routes')
  .then(res => res.json())
  .then(ret => {
    authRoutes = ret;
    oldRender();
  });


二、login 登录接口

    request: /api/login/account
    response: {status: "ok", type: "account", currentAuthority: "admin"}


三、设置和获取权限 

    router.config.js 配置Routes每个页面都调用Authorized.js来判断权限
    {
        path: '/',
        component: '../layouts/BasicLayout',
        Routes: ['src/pages/Authorized'],                // 设置
        authority: ['admin', 'user', 'ROLE_RDDPL4WSV0'],
        routes: [
            { path: '/', redirect: '/dashboard/workplace', authority: ['admin', 'user', 'ROLE_RDDPL4WSV0'] },
        ]
    }


    utils/authority   getAuthority、setAuthority

    存储到localStrage中的antd-pro-authority


四、菜单

    modules/menu        getMenuData()获取菜单的方法

    layouts/BasicLayouts        页面布局，SiderMenu组件menuData菜单数据

    menuData格式
    [{
        "path": "/dictionary",
        "icon": "book",
        "name": "数据字典",
        "locale": "menu.dictionary",
        "authority": ["admin", "user"],
        "children": [{
            "path": "/dictionary/list",
            "name": "字典列表",
            "exact": true,
            "locale": "menu.dictionary.list"
        }, {
            "path": "/dictionary/create",
            "name": "新建字典",
            "exact": true,
            "locale": "menu.dictionary.create"
        }]
    }]

react使用typescript

1、state和props定义

    interface IProps {
        aProps: string;
        bProps: string;
    }
    interface IState {
        aState: string;
        bState: string;
    }

    class App extends React.PureComponent<IProps, IState> {
        state = {
            aState: '',
            bState: '',
        };

        render(){
            this.props.aProps;
            this.state.aState;
            return null;
        }
    }

    const mapStateToProps = () => {
        return {
            aProps: 'a',
            bProps: 'b'
        }
    }
    const mapDispatchToProps = {};
    export default connect(mapStateToProps, mapStateToProps)(App)

| https://www.jianshu.com/p/c7b3b9c98d04
| https://umijs.org/zh/plugin/umi-plugin-react.html#%E5%AE%89%E8%A3%85 // umiJS