React使用DVA本地state传值取值

最近在用Ant Pro 做一个后台系统，在使用中发现Antd Pro使用DVA来实现redux+sagas+router一系列的功能，比传统方式要方便快捷的多，自己研究了其中一些原理，在此贴上代码供别人参考也给自己做个记录，

需要取值的页面

index.js

import { connect } from 'dva';

//这里是一个语法糖，和传统的connect()()作用一样。即把对应models目录下的state取出与本页的变量关联。

@connect(({ chart, loading, global = {} }) => ({    //其中global={}表示global中的所有state

  chart,   //等同chart:chart，ES6语法。

  weather: global.weather,   //读取原有的state，即models中的global.js文件中的weather

  city: global.city

  loading: loading.effects['chart/fetch'],   //这个statu使用models中的chart.js文件中的fetch方法异步获取

}))

export default class XXX extends Component {

...

render(){

 const { chart, loading, weather, city } = this.props;  //在这可用'this.props'读取

}

}

含有state值的页面

chart.js

export default {

  namespace: 'chart',

  state: {

   ......

  },

  effects: {  //这里相当于是redux

    *fetch(_, { call, put }) {

      const response = yield call(fakeChartData);  //这里的fakeChartData是一个request请求

      yield put({

        type: 'save',

        payload: response,

      });

    },

    ......

  },

}

global.js

export default {

  namespace: 'global',

  state: {

    collapsed: true,

    notices: [],

    city: "郑州市",

    weather: {},

    mapView: "city",

  },

  .......

}

巴特西

React使用DVA本地state传值取值

React使用DVA本地state传值取值

需要取值的页面

含有state值的页面

最新文章

热门文章