Dva.js总结

1.why Dva

dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何新概念，所有代码不到 100 行。dva 实现上尽可能不建立新语法，而是用依赖库自己的语法，好比 router 的定义仍是用 react-router 的 JSX 语法的方式(dynamic config 是性能的考虑层面，以后会支持)。
他最核心的是提供了 app.model 方法，用于把 reducer, initialState, action, saga 封装到一块儿

app.model({
  namespace: 'products',
  state: {//State 表示 Model 的状态数据
    list: [],
    loading: false,
  },
  subscriptions: [
    function(dispatch) {
      dispatch({type: 'products/query'});//触发 action 的函数，action 是改变 State 的惟一途径
    },
  ],
  effects: {//Effect 被称为反作用，在咱们的应用中，最多见的就是异步操做
    ['products/query']: function*() {
      yield call(delay(800));
      yield put({
        type: 'products/query/success',
        payload: ['ant-tool', 'roof'],
      });
    },
  },
//在dva中reducers聚合积累的结果是当前model的state 对象。经过actions中传入的值，
//与当前 reducers 中的值进行运算得到新的值（也就是新的 state）
  reducers: {
    ['products/query'](state) {
      return { ...state, loading: true, };
    },
    ['products/query/success'](state, { payload }) {
      return { ...state, loading: false, list: payload };
    },
  },
});

2.简单明了的Dva数据流向

数据的改变发生一般是经过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候能够经过 dispatch 发起一个 action，若是是同步行为会直接经过 Reducers 改变 State ，若是是异步行为（反作用）会先触发 Effects 而后流向 Reducers 最终改变 State

3.Dva Router控制

dva 实例提供了 router 方法来控制路由，使用的是react-router

const app = dva();
import { Router, Route } from 'dva/router';
app.router(({history}) =>
  <Router history={history}>
    <Route path="/" component={HomePage} />
  </Router>
);

4.dva 应用的最简结构（带 model)

dva 提供多个 effect 函数内部的处理函数，比较经常使用的是 call 和 put。
call：执行异步函数
put：发出一个 Action，相似于 dispatch

课堂实战

// 建立应用
const app = dva();

// 注册 Model
app.model({
  namespace: 'count',
  state: 0,
  reducers: {
    add(state) { return state + 1 },
  },
  effects: {
    *addAfter1Second(action, { call, put }) {
      yield call(delay, 1000);//异步操做
      yield put({ type: 'add' });//相似于dispatch发action
    },
  },
});

// 注册视图
app.router(() => <ConnectedApp />);

// 启动应用
app.start('#root');

5.AntDesignPro1.0项目中的Dva

1.index.js

const app = dva({
  history: createHistory(),//history能够用来跳转路由内含location属性，这里修改history默认接口，其余接口不变----初始化
});

// 2. Plugins
app.use(createLoading());//加载插件这里应该加载的是加载动画插件

// 3. Register global model
app.model(require('./models/global').default);//将src/modles里面的东西灌进去，经过namespace取

// 4. Router
app.router(require('./router').default);//全局挂载路由信息

// 5. Start
app.start('#root');

export default app._store;

2.router.js

export const getRouterData = app => {
    const routerConfig = {
        '/': {
            component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
        },
        '/person/personbasetwo': {//添加路径指向引入的组件，这条数据会被getRoutes函数渲染成真正的<Route>包裹的路由
          component: dynamicWrapper(app, ['personbaseTwo'], () => import('../routes/Person/PersonBaseTwo')),
        },
        '/person/baseInfo/:id': {//dynamicWrapper函数会吧[]里面数据放到app的model属性里，app是dva的实例
          component: dynamicWrapper(app, ['personbase'], () => import('../routes/Person/PersonBase/BaseInfo')),
        },
        ·······

3.connect链接model

/*dva的实例app中应该导入了全部的model，好像是在router中导入的，
这里用解构赋值从model中取值，为组件导入props，loading为dva提供的动画插件*/
@connect(({ personbaseTwo, loading }) => ({
  personbaseTwo,
  searchLoading: loading.effects['personbaseTwo/getList'],
//loding被这个异步函数影响，异步操做中就为ture，结束就为false
  loading: loading.effects['personbaseTwo/listpage'],
}))//从model中取数据生成本身想要的对象结构经过@修饰器放到下面组件中去
class personbaseTwo extends Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }
  componentWillMount(){//组件将要渲染时拿到默认的一页多少条和当前页这些数据
    const { personbaseTwo:{pagination} }= this.props;
    const { page,pageSize } = pagination;
    this.props.dispatch({//转到namespace为personbaseTwo下面的listpage方法拿到页码为page的数据
      type:'personbaseTwo/listpage',//接口根据page只去此页数据
      payload:{
        page,
        pageSize,
      },
    });
  }
·······

4.跳转路由

onOk() {//点击肯定执行的函数
          const {id}= record;
          than.props.dispatch(routerRedux.push({//用来跳转路由的
            pathname: `/person/baseInfoTwo/${id}`,//用这个pathname从新渲染路由页面并传ID
          }))
        },