聊聊 effects 与 reducers--React AntDesign Dva

最新推荐文章于 2024-08-06 13:54:57 发布

Sail__

最新推荐文章于 2024-08-06 13:54:57 发布

阅读量4.4k

点赞数 3

分类专栏： react 文章标签： react reducers dva ant-design effects

本文链接：https://blog.csdn.net/diaobatian/article/details/103904396

版权

本文深入探讨Dva中的effects和reducers，解析它们的函数参数特点。重点讲解了call、put、select关键字的用法，以及如何在UI视图文件中调用effects函数进行数据交互。同时，文章还介绍了reducers中show函数的作用，阐述了state和payload如何协同更新数据并触发页面重渲染。

摘要由CSDN通过智能技术生成

原文：https://www.yuque.com/yuxuanbeishui/zog1rm/tgmgws

今天我们就来聊聊 dva 中的 effects 与 reducers以及其中涉及的关键字的使用。如果它们之间工作流程还不太熟悉，请阅读：分析models源码

为了让小伙伴们更好的理解与使用 effects 与 reducers，我们依然找现有的 models 为例：

位置："/src/pages/Profile/models/profile.js"

<div class="lake-codeblock-content"><div class="CodeMirror"><pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"></span><span class="lake-preview-codeblock-content"><span class="cm-keyword">import</span> { <span class="cm-def">queryBasicProfile</span>, <span class="cm-def">queryAdvancedProfile</span> } <span class="cm-keyword">from</span> <span class="cm-string">'@/services/api'</span>;

export default {
namespace: ‘profile’,

state: {
basicGoods: [],
advancedOperation1: [],
advancedOperation2: [],
advancedOperation3: [],
},

effects: {
fetchBasic({ payload }, { call, put }) {
const response = yield call(queryBasicProfile, payload);
yield put({
type: ‘show’,
payload: response,
});
},
fetchAdvanced(_, { call, put }) {
const response = yield call(queryAdvancedProfile);