简介
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。
