umi antd跨组件数据共享 快速上手理解与应用
背景：搜索关键词umi connect 看到了使用connect的情况，但是直接上手antd的我只知道umi可能封装了redux什么之类的。接着迷迷糊糊的看了redux react-redux，dva等等。根据学习去整理一个能用的方案。
需求
存储一个状态数据，可以跨组件修改与共享。
本文偏向快速解决需求 相关的背景知识什么，只尽量理解他们的关系。锚定问题 跨组件数据共享和更新。
实践前提
本人使用的是umi搭建的antd-pro。所以如果你也是新手遇到问题在实践之前可以先看适合不适合。猜测既然是umi封装的，那么umi搭建的其他的应用应该也适用。
探索与实践
- 如何定义跨组件状态数据。 通过命名的方式定义一个model文件，约定式的 model 组织方式()。 创建src/pages/xxx/model.ts文件，注意相对的位置。也就是说umi通过这样的文件命名模式来注册状态数据模型。 export default { namespace:"shareData", state:{//共享的数据 shareData_string:share_string_init, shareData_obj:{ } }, effects:{ // *funname{ payload }, { call, put }, //定义异步操作 }, reducers:{//执行同步操作 // fun_name(state,{payload}){} // 新数据 set_shareData_string(state:any,{payload}:any){ //返回新的状态数据的样子 return {...state,shareData_string:payload } }, set_shareData_obj(state:any,{payload}:any){}, } }
- 在如何跨组件共享和修改数据 umi在props中传入了dispatch 调用dispatch方法 指定要执行的action。便可修改数据。如果是跨组件以同样的方式操作。本次示例只在组件A中测试。添加了按钮来模拟数据的修改。 import { Button } from antd import { connect } from umi type propsType = { dispatch:any; local_string:string; } function A(props:propsType) { //umi 帮我们传入的 const { dispatch } = props console.log("props in A",props) const change_string = ()=>{ dispatch({ //名称空间内的方法 type:"shareData/set_shareData_string", payload:"new string" }) } return (<> <div> AAAAA {props.local_string} BBBBBB </div> <Button onClick={change_string}>button to change</Button> </> ) } export default connect(state=>({ local_string:state.shareData.shareData_string //局部命名 //名称空间 //具体数据 }))(A) 效果如下 点击前 后效果。 之后就可以跨组件进行操作了。
其他补充
umi实现跨组件数据管理的方案还有通过hooks的
-
参考antdPro FormSteps代码 react项目用@connect装饰器前需要干嘛？
