如何使用dva实现组件间的通讯

背景

使用 yarn create umi 创建了一个干净的基于umi&＃43;dva的react项目。在遇到组件之间的通讯时&＃xff0c;需要使用到dva。如何使用dva实现组件之间的通讯呢&＃xff1f;

步骤如下&＃xff1a;

1. model定义

export default {namespace:&＃39;settingDrawer&＃39;,state: {visible: false},reducers: {&＃39;visible&＃39;(state:any, { payload }) {let newState &＃61; {...state}newState.visible &＃61; payload.visiblereturn newState},},
}


reducers解析

reducers下的方法&＃xff0c;即将来可使用dispatch({type:xxx, payload:xxx}) 实现状态的修改&＃xff0c;即组件间的通讯&＃xff08;注意return返回的state值&＃xff0c;这里有坑&＃xff0c;正确返回了state&＃xff0c;组件却未正确更新看这里&＃xff09;

ps: 注意
该model文件必须要按umi约定的目录或规则中&＃xff0c;否则无法使用
默认情况下全局model放在 /src/models下&＃xff0c;局部页面用的放在/src/page/xxx/model.js

2. react UI componet相关的代码

// 引用dva
import React, {Component} from &＃39;react&＃39;
import { connect } from &＃39;dva&＃39;
class SettingDrawer extends Component {onClose &＃61; () &＃61;> {const { dispatch } &＃61; this.propsdispatch({type:&＃39;settingDrawer/visible&＃39;, payload:{ visible: false}})}render() {const { settingDrawer: { visible } } &＃61; this.propsreturn (<div><Drawertitle&＃61;"Basic Drawer"visible&＃61;{visible}onClose&＃61;{this.onClose}><p>Some contents...</p></Drawer></div>);}
}
// 使用connect 关联组件
export default connect(({ settingDrawer }:{ settingDrawer:any})&＃61;>({ settingDrawer }))(SettingDrawer)


connect方法解析

connect方法本身返回的是一个 React组件&＃xff0c;所以export default 出来的也是一个组件&＃xff0c;没毛病
connect方法注意&＃xff0c;用了两次()&＃xff0c;第一个()内的是一个映射方法&＃xff0c;这个映射方法带一个参数&＃xff0c;这个参数就是model模型中定义的状态&＃xff0c;映射方法返回数据&＃xff0c;将来就会自动传到第二个括号中的组件中的属性。
也就是&＃xff0c;在这个组件中&＃xff0c;可以从this.props中获取model中的state的数据的关键所以

如何在别的组件未定义model的组件中&＃xff0c;也能使用dispatch去触发dva中管理的状态呢&＃xff1f;

答案是使用connect&＃xff0c;代码如下&＃xff1a;

import React, {Component} from &＃39;react&＃39;
import { connect } from &＃39;dva&＃39;class MyCom extends Component{}
export default connect()(MyCom )


问题笔记&＃xff08;万事具备却报错&＃xff09;

本以为完成以上操作后&＃xff0c;就可正常使用了&＃xff0c;谁知道&＃xff0c;会报如下错&＃xff1a;
这里的背景是这样子的&＃xff1a;笔者开发是一个模块&＃xff0c;模块中又有许多小模块&＃xff0c;这些小模块之间需要通讯。即开发的代码是放在src/componets/xxxx/xxx中的。&＃xff08;这里还留下一个小小遗憾&＃xff0c;就上面的model是需要放在默认的src/models下放可正常使用的&＃xff0c;还没实现与这个小组件放在一起&＃xff09;

Uncaught Error: Could not find “store” in either the context or props of “Connect(SettingDrawer)”. Either wrap the root component in a , or explicitly pass “store” as a prop to “Connect(SettingDrawer)”.

这是什么问题呢&＃xff1f;原来上面写的SettingDrawer组件 是需要被包裹在Provider容器中方可正常获取到redux的store的&＃xff0c;store就是存储这些状态值的。
怎么解决&＃xff1f;代码如下&＃xff1a;

import { Provider } from &＃39;react-redux&＃39;
...<Provider store&＃61;{window.g_app._store}><SettingDrawer /></Provider>
...