React结合Ant Design Pro开发项目理解（service、model、index等文件逻辑关系）

luotouzi

于 2021-08-06 20:04:48 发布

阅读量1.7k

点赞数 4

分类专栏：前端 React 文章标签： react js

本文链接：https://blog.youkuaiyun.com/luotouzi/article/details/119317714

版权

本文介绍了React结合Ant Design Pro开发项目时，service文件中的请求操作，model文件中的Effect和Reducers逻辑，以及index文件的路由配置。组件间交互通过dispatch触发model的action，异步请求在effects中调用service，并通过reducers更新state。此外，还探讨了@connect装饰器在绑定状态和方法到组件props中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件中传值

react——值写在了视图层
Antd pro——值写在model层，通过saveState扩展表达式，把值更新到state后会触发视图层的render方法【通过props获取model中的值】

下图是整个项目各模块的关系

大概流程是UI组件间的交互操作，首先调用Model中的effects，Model通过effects调用Service（封装了request请求）中的请求函数来发起请求，获取服务端返回的响应后，调用reducers来改变state，更新View
在这里插入图片描述

1）service文件编写对应的请求操作

此处为对应的请求函数，其中的request请求是基于fetch的封装，便于统一处理POST、GET等请求参数、请求头以及错误提示信息等

2）model文件编写对应的Effect操作（及Reducers）

此处相当于redux的middleware，在effects里面可以调用service文件中请求方法进行异步请求

effects 用于处理异步操作，不能直接修改 state，由 action 触发修改state，也可触发 action。
它只能是 generator 函数（ES6文档），并且有 action 和 effects 两个参数。第二个参数 effects 包含 ==put、call 和 se