react---Umi基础介绍和项目搭建 + umi基础model使用 + Dva基本概念和原理持续创作，加速成

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

umi

umi是一个react的企业级开发框架，内置了dva、路由等插件。可以实现零配置的方式开发一个react项目

创建项目

npm create umi first-umi-app # 创建一个first-umi-app项目
cd first-umi-app # 进入目录
npm i
npm start # 启动项目

export default {
    namespace: 'book',
    state: {
        list: [],
        page: 1,
        current: {}
    },
    // 所有的redux中的异步操作
    effects: {
        // 此处的redux集成了插件redux-saga来对action和reducers做处理
        // loadData表示加载数据
        *loadData({ payload }, { call, put }) {
            // call用来调用接口 获取数据
            // put 用来派发action,是redux-saga中的一个方法
            // 此种写法是es6中generate生成器函数
            yield put({
                type: 'save',
                payload: {
                    list: [{id: 1, name: '球状闪电'}, {id:2, name: '沙丘'}]
                }
            })
        },
        *getOne({ payload }, { call, put }) {
            
        }
    },
    reducers:{
        save(state, { payload }) {
            return { ...state, ...payload }
        }
    }
}

在组件中映射model

import { connect } from 'umi'


//  List 此处的命名首字母要大写
const List = (props) => {
    // props中就会包含有book中的数据和dispatch方法
    // 如果我们要改变数据 通过dispatch({ type: 'book/save', payload: {} })
    const { list, page, dispatch } = props
    return <h1>我是一个组件</h1>
}

export default connect(state=>state.book)(List)

==大佬写的Dva基本概念和原理==

具体请看链接：大佬写的Dva--易懂 1.dva简化了React的setState跨组件传输数据的耦合，数据通过mapStateToProps就可以共享数据，并且比Redux传输数据操作要更简单，可以自动处理等待状态

2.数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致（也是来自于开源社区）。

3.通过URL调用渲染组件初始化dom的时候，会通过connect(mapStateToProps) 加载共享数据，并且调用dispatch会触发action 进行同步或异步操作或者监听地址栏是否传入参数的处理。

详细的看下图链接
namespace:可以通过空间名找到对应的model下的 viewer.js
state: {cesiumViewer:undefined} 存储共享的数据
subscriptions:常用来监听浏览器地址输入的参数
effects:异步处理
reducers:同步处理
save:自定义方法里的 state为当前的数据，action.payload为传过来要改变的数据