dva是redux+redux-saga的一个封装，解决了异步获取数据的问题，写法也更加的简单易懂。

主要的数据处理都是在models文件夹里，这里面有state，effects，reducers这些，一般要进行api的获取，需要引入service文件夹里的东西（这个里面是封装的一些请求地址），在effects里异步调用获取请求返回的值。

一个简单的model：

import { queryTags } from '../services/api';

export default {
  namespace: 'monitor',

  state: {
    tags: [],
  },

  effects: {
    *fetchTags(_, { call, put }) {
      const response = yield call(queryTags);
      yield put({
        type: 'saveTags',
        payload: response.list,
      });
    },
  },

  reducers: {
    saveTags(state, action) {
      return {
        ...state,
        tags: action.payload,
      };
    },
  },
};

如果要使用这个里面的值，需要connect一下命名空间，将里面的值赋到组件的props上

import { connect } from 'dva';
@connect(({ monitor }) => ({
  monitor
}))

接下来就可以使用this.props.monitor.tags取到model里面的值了

那么想要异步获取数据怎么办？在组件里dispatch一下model里的effects即可得到数据

componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'monitor/fetchTags',
    });
  }

然后在render里定义一下，取到connect之后传到props里的数据即可。

记住数据是在models里定义的，（异步）获取、改变数据也是在这里面，所以model这个文件很重要。service只是获取api。

render() {
    const { monitor, loading } = this.props;
    const { tags } = monitor;

return （
//...
）

赏

谢谢你请我吃糖果

微信