前言: 这是我在学习的时候遇到了这块的内容, 有些可能理解不到位, 还请指出
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
}
}
}
}