AntDesign Pro connect

本文主要是介绍AntDesign Pro connect，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言: 这是我在学习的时候遇到了这块的内容, 有些可能理解不到位, 还请指出

dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。

Connect传递Model中的数据给router

比如model中定义的login.js 定义了state数据,那么在router组件中怎么获取到这个数据呢？

通过connect可以传递过来，然后通过this.props就可以访问了，同样也会将dispatch(可以发送请求到model去),history方法传递过来，这样就可以通过组件传递moel保存的值了

来看看两个模块把

1. index.jsx

import { connect } from 'umi';

const Welcome= (props) => {
    props.dispatch({
        type: 'namespace/functionName'
    })
}

const namespace = 'systembb';
const mapStates = (state) => {
    const systemList = state[namespace].system;
    return {
      systemList
    }
}
export default connect(mapStates)(Welcome);

// 然后就可以在dom中使用 this.props.systemList了

1. models

/***
namespace 表示在全局 state 上的 key
state 是初始值，在这里是空数组
reducers 等同于 redux 里的 reducer，接收 action，同步更新 state

call 用来网络请求, put 然后yield put() 分发给 reducers 中
*/
export default {
  namespace: 'systembb',
  state: {
    system: [
      {
        name: 'this model date'
      }
    ]
  },
  effects: {
    // {paylaod, callback}, {put, call}
    *getdata({payload, _}, { call, put }) {
      yield put({
        type: 'setdata',
        payload: payload
      })
    }
  },
    
  reducers: {
    setdata(state, {payload}) {
      console.log(state)
      return {
        ...state,
        payload
      }
    }
  }
}

这篇关于AntDesign Pro connect的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！