本文源码地址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概念

数据流向

img

首先我们根据 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 model

• src/pages/**/models/**/*.js 为 page model

• global 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 的值