dva

简介

dva是一个基于 react 和 redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载、react-native、SSR 等，已在生产环境广泛应用。详细文档 可看官网。

一、关于如何拿到dispatch?

• 1、引入connect

import { connect } from 'dva';

• 2.1、无状态组件中直接写在组件参数中，使用时直接用dispatch即可

const Products = ({ dispatch, products }) => {
  dispatch({ 
      type: 'products/delet', 
      payload: id,
  });
}

• 2.2 有状态组件中直接从props中拿即可

this.props.dispatch({type: "keyword/getOptionsDatas"});

• 3、把该组件和model模型connect起来。

二、model为何未接收到dispatch触发动作？

• 最可能的原因是你忘记在index.js中绑定此model！

三、从model传到组件的数据在什么地方接收？

• 可在react生命周期中选择合理的位置，比如下面这个挺好

componentWillReceiveProps(nextProps) {}

四、设置子路由需要注意的事项？

• 路由引自'dva/router'，最该注意的是关键词exact的位置， exact表明路径的匹配是否严格；
• 父路由和子路由之间没有嵌套关系，子路由的path在父路由的path基础上添加字段，exact放在父路由上和父路由的平级路由上，子路由和重定向路由上都不能放;
• 如果所有父路由源自router.js中的顶级路由，则顶级路由和重定向路由不能放exact;

五、dva-cli搭建的项目中各文件夹所负责功能？

• layouts --- 顶级路由页面pages;
• routes --- 页面pages;
• components --- routes的子组件;
• models --- 异步操作（如请求数据），改变state;
• services --- 数据接口服务;
• utils --- 工具函数;
• assets --- 静态资源;

六、connect中返回的数据跑到哪了？

• 有状态组件中可在this.props中获取；
• 无状态组件中把返回的数据传到组件的参数中，从参数中直接拿数据使用。

七、关于model文件的介绍？

• 1、基本结构如下：

export default {

  namespace: 'example',

  state: {},
  subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-line
    },
  },

  effects: {  // 异步行为触发effects,然后流向reducers，最终改变state
    *add({ payload }, { call, put }) {  // eslint-disable-line
        const response = yield call(testQs, {name: 1, password: 11111111, birthday: 1});    

        yield put({ type: 'save' });  // put 表示dispatch action，然后会触发reducers

        // yield select用于从 state 里获取数据。
        const todos = yield select(state => state.todos);
    },
  },

  // 用于处理同步操作,唯一可以修改state的地方，由 action 触发
  // 同步行为触发reducer 用于更新state, dispatch后自动执行reducers
  reducers: {
    save(state, action) {
      return { ...state, ...action.payload }; 
    },
  },

};

• 2、解释
  • 1.1、subscription 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。在 app.start() 时被执行，数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。
  • 1.2、Subscriptions 是一种从 源 获取数据的方法，它来自于 elm。
  • 2.1、简单理解 call 是调用执行一个函数而 put 则是相当于 dispatch 执行一个 action，而 select 则可以用来访问其它 model，更多可以参看 https://github.com/superRaytin/redux-saga-in-chinese。
  • 2.2、需要注意的是，无论是 Generator 函数，yield 亦或是 async 目的只有一个： 让异步编写跟同步一样 ，从而能够很好的控制执行流程。
  • 2.3、async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。
  • 2.4、yield call方法第二个参数是第一个参数的参数，第一个参数是函数（方法）。
  • 2.5、一般yield call和yield put是成对出现的，yield call执行彻底结束后才会执行对应的yield put。
  • 2.6、yield select用于从 state 里获取数据。
  • 3.1、effects用于处理异步操作和业务逻辑，不直接修改 state。由 action 触发，可以触发 action，可以和服务器交互，可以获取全局 state 的数据等等。
  • 3.2、异步行为触发effects,然后流向reducers，最终改变state。
  • 4.1、同步行为触发reducer 用于更新state, dispatch后自动执行reducers。
  • 4.2、reducer 用于处理同步操作,唯一可以修改state的地方，由 action 触发。
  • 4.3、在 dva 中，reducers 聚合积累的结果是当前 model 的 state 对象。
  • 5、*add(){} 前面的 * 号，表示这个方法是一个 Generator函数。

八、dva搭建的项目默认使用CSS Modules的形式来控制样式，那所引用第三方UI组件（比如antd）的默认样式该如何修改？

• 比如菜单menu的item，只需检查它默认样式的类名或id名，然后如下修改：

:global(.ant-menu-item) {
     border-bottom: 4px solid transparent;
     padding: 0 21px;
 }

• 关于CSS Modules的详细内容可参考CSS Modules。