本文源码地址https://github.com/Colinlyj210/umi-dva
React通信
组件会发生三种通信。
- 向子组件发消息
- 向父组件发消息
- 向其他组件发消息
React 只提供了一种通信手段：传参。
父组件通过参数传给子组件，子组件通过调用父组件传过来的参数方法进行通信，然后在父组件中通过setState改变状态。
class Son extends React.Component {
render() {
return <input onChange={this.props.onChange}/>;
}
}
class Father extends React.Component {
constructor() {
super();
this.state = {
son: ""
}
}
changeHandler(e) {
this.setState({
son: e.target.value
});
}
render() {
return <div>
<Son onChange={this.changeHandler.bind(this)}/>
<p>这里显示 Son 组件的内容：{this.state.son}</p>
</div>;
}
}
ReactDOM.render(<Father/>, mountNode);
跨组件通信的时候通常用到Redux
图解Dva
Dva概念
数据流向
首先我们根据 url 访问相关的 Route-Component，在组件中我们通过 dispatch 发送 action 到 model 里面的 effect 或者直接 Reducer
当我们将action发送给Effect，基本上是取服务器上面请求数据的，服务器返回数据之后，effect 会发送相应的 action 给 reducer，由唯一能改变 state 的 reducer 改变 state ，然后通过connect重新渲染组件。
当我们将action发送给reducer，那直接由 reducer 改变 state，然后通过 connect 重新渲染组件。
connect
一个函数，绑定 State 到 View
Action
一个对象，描述事件，可以是同步，也可以是异步
{
type: 'count/add', // 如果在 model 外调用，需要添加 namespace，这里count就是namespace
payload: {}, // 需要传递的信息
}
dispatch
dispatch(Action);
dispatch({
type: 'count/add', // 如果在 model 外调用，需要添加 namespace，这里count就是namespace
payload: {}, // 需要传递的信息
});
Model
{
namespace: 'count',
state: 0,
reducers: {
add(state) { return state + 1 },
},
effects: {
*addAfter1Second(action, { call, put }) {
yield call(delay, 1000);
yield put({ type: 'add' });
},
},
}
namespace
当前 Model 的名称。整个应用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成。namespace与文件名称保持一致（小驼峰）
state
该 Model 当前的状态。数据保存在这里，直接决定了视图层的输出
reducers
更新数据，Action 处理器，处理同步动作，用来算出最新的 State。
effects
请求数据，Action 处理器，处理异步动作。底层引入了redux-sagas做异步流程控制，由于采用了generator的相关概念。
Effect 是一个 Generator 函数，内部使用 yield 关键字，标识每一步的操作（不管是异步或同步）
call 和 put
dva 提供多个 effect 函数内部的处理函数，比较常用的是 call 和 put。详见redux-saga
- call：执行异步函数
- put：发出一个 Action，调用给定的函数，类似于 dispatch
- select：从全局state中取数据
const num = yield select(
state => state.count.num
);
Subscription
用于订阅一个数据源，然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。 subscriptions 中无法监听state中的数据变化。
model 分两类，一是全局 model，二是页面 model。全局 model 存于 /src/models/ 目录，所有页面都可引用；页面 model 不能被其他页面所引用。
规则如下：
src/models/**/*.js为 global modelsrc/pages/**/models/**/*.js为 page modelglobal model 全量载入，page model 在 production 时按需载入，在 development 时全量载入
page model 为 page js 所在路径下
models/**/*.js的文件page model 会向上查找，比如 page js 为
pages/a/b.js，他的 page model 为pages/a/b/models/**/*.js+pages/a/models/**/*.js，依次类推-
约定 model.js 为单文件 model，解决只有一个 model 时不需要建 models 目录的问题，有 model.js 则不去找
models/**/*.js+ src + models - g.js + pages + a + models - a.js - b.js + ss - s.js - page.js + c - model.js + d + models - d.js - page.js - page.js
如上目录：
- global model 为
src/models/g.js -
/a的 page model 为src/pages/a/models/{a,b,ss/s}.js -
/c的 page model 为src/pages/c/model.js -
/c/d的 page model 为src/pages/c/model.js, src/pages/c/d/models/d.js
使用 Dva 开发复杂 SPA
当一个effect执行后需要在视图组件中操作逻辑然后再执行某些事情
new Promise((resolve, reject) => {
dispatch({ type: 'reusable/addLog', payload: { data: 9527, resolve, reject } });
})
.then((data) => {
console.log(`after a long time, ${data} returns`);
});
注意这里，我们是把resolve和reject传到action里面了，所以，只需在effect里面这样处理：
try {
const result = yield call(service1);
yield put({ type: 'service1Success', payload: result });
resolve(result);
}
catch (error) {
yield put({ type: 'service1Fail', error });
reject(ex);
}
这样，就实现了跨越组件、模型的复杂的长流程的调用。
new Promise((resolve)=>{
dispatch({
type: 'employeeKpi/getReportList',
payload: {
onlyPersonal: login.loginInfo.onlyPersonal,
resolve
}
});
}).then(()=>{
this.getKpi()
})
Dva中的坑
effects和reducers中的方法不能同名否则或产生死循环
export default {
namespace: 'system',
state: {
list: [],
},
effects: {
* fetch({ payload }, { call, put }) {
const response = yield call(query, payload);
yield put({
type: 'fetch',
payload: response,
});
},
},
reducers: {
fetch(state, action) {
return {
...state,
list: action.payload,
};
},
},
};
jquery等方法发送url，cookie会自动在header中； 但fetch的方法不会自带cookie，要在options中设置。credentials: 'include' ；因为默认是omit, 即不发送cookies。
阻塞地执行另一个model中的effect需要如下操作
const result = yield put.resolve({ type: 'someActionType', payload })
// result 会是该 effect 生成器函数中 return 的值
