redux & dispatch & payload

react & react-redux & redux-saga


  1. // contrast
  2. dispatch({
  3. type: "pointCheckDetail/getContrastData",
  4. payload: {
  5. id,
  6. },
  7. });
  8. // status
  9. dispatch({
  10. type: "pointCheckDetail/getPointCheckResults",
  11. payload: {},
  12. });
  13. // table
  14. dispatch({
  15. type: "pointCheckDetail/getPointCheckDetails",
  16. payload: {
  17. id,
  18. contrasts,
  19. },
  20. });

  1. effects: {
  2. *initData({ payload }, { put }) {
  3. yield put({
  4. type: "save",
  5. payload: {
  6. ...initialState,
  7. ...payload,
  8. }
  9. });
  10. },
  11. *getBasicData({ payload }, { put, call }) {
  12. yield put({
  13. type: "showLoading",
  14. });
  15. const {
  16. id,
  17. } = payload;
  18. const res = yield call(getPointCheckBasics, id);
  19. if (res.success) {
  20. yield put({
  21. type: "save",
  22. payload: {
  23. loading: false,
  24. // dataSource: res.data,
  25. },
  26. });
  27. } else {
  28. yield put({
  29. type: "hiddenLoading",
  30. });
  31. message.error(`获取数据失败!`);
  32. }
  33. },
  34. *getContrastData({ payload }, { put, call }) {
  35. yield put({
  36. type: "showLoading",
  37. });
  38. const {
  39. id,
  40. } = payload;
  41. const res = yield call(getPointCheckContrasts, id);
  42. if (res.success) {
  43. yield put({
  44. type: "save",
  45. payload: {
  46. loading: false,
  47. // contrast: contrastShaper(res.data),
  48. contrast: contrastShaper([]),
  49. },
  50. });
  51. } else {
  52. yield put({
  53. type: "hiddenLoading",
  54. });
  55. message.error(`获取数据失败!`);
  56. }
  57. },
  58. *getResultData({}, { put, call }) {
  59. yield put({
  60. type: "showLoading",
  61. });
  62. const res = yield call(getPointCheckResults, );
  63. if (res.success) {
  64. yield put({
  65. type: "save",
  66. payload: {
  67. loading: false,
  68. // dataSource: res.data,
  69. },
  70. });
  71. } else {
  72. yield put({
  73. type: "hiddenLoading",
  74. });
  75. message.error(`获取数据失败!`);
  76. }
  77. },
  78. *updateReportName({ payload }, { put, call }) {
  79. yield put({
  80. type: "showLoading",
  81. });
  82. // const {
  83. // id,
  84. // name,
  85. // } = payload;
  86. const res = yield call(putPointCheckReportName, payload);
  87. if (res.success) {
  88. yield put({
  89. type: "save",
  90. payload: {
  91. loading: false,
  92. // dataSource: res.data,
  93. },
  94. });
  95. } else {
  96. yield put({
  97. type: "hiddenLoading",
  98. });
  99. message.error(`获取数据失败!`);
  100. }
  101. },
  102. *getTableData({ payload }, { put, call }) {
  103. yield put({
  104. type: "showLoading",
  105. });
  106. // const {
  107. // id,
  108. // contrasts,
  109. // } = payload;
  110. const res = yield call(getPointCheckDetails, payload);
  111. if (res.success) {
  112. yield put({
  113. type: "save",
  114. payload: {
  115. loading: false,
  116. // dataSource: res.data,
  117. },
  118. });
  119. } else {
  120. yield put({
  121. type: "hiddenLoading",
  122. });
  123. message.error(`获取数据失败!`);
  124. }
  125. },
  126. },

refs

https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=redux-saga



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


redux & dispatch & payload的更多相关文章

  1. 3.4 redux 异步

    在大多数的前端业务场景中,需要和后端产生异步交互,在本节中,将详细讲解 redux 中的异步方案以及一些异步第三方组件,内容有: redux 异步流 redux-thunk redux-promise ...

  2. redux-simple 简化版的redux

    作为react的粉丝,当然要吐槽一下react组件通信问题.react的单向数据流是组件通信的一大阻碍,只允许父组件向子组件传值,子组件向父组件传值只能通过父组件向子组件传递回调函数实现.如果在深层次 ...

  3. Redux API之bindActionCreators

    bindActionCreators(actionCreators,dispatch) 把 action creators 转成拥有同名 keys 的对象,但使用 dispatch 把每个 actio ...

  4. 理解 Redux 的中间件

    将该思想抽象出来,其实和 Redux 就无关了.问题变成,怎样实现在截获函数的执行,以在其执行前后添加自己的逻辑. 为了演示,我们准备如下的示例代码来模拟 Redux dispatch action ...

  5. 手把手教你撸一套Redux(Redux源码解读)

    Redux 版本:3.7.2 Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 说白了Redux就是一个数据存储工具,所以数据基础模型有get方法,set方法以及数据改变后通知 ...

  6. 探索从 MVC 到 MVVM + Flux 架构模式的转变

    本文首发于 my blog 在业务中一般 MVVM 框架一般都会配合上数据状态库(redux, mobx 等)一起使用,本文会通过一个小 demo 来讲述为什么会引人数据状态库. 从 MVC 到 MV ...

  7. React: 研究Flux设计模式

    一.简介 一般来说,State管理在React中是一种最常用的实现机制,使用这种state管理系统基本可以开发各种需求的应用程序.然而,随着应用程序规模的不断扩张,原有的这种State管理系统就会暴露 ...

  8. 手写Redux-Saga源码

    上一篇文章我们分析了Redux-Thunk的源码,可以看到他的代码非常简单,只是让dispatch可以处理函数类型的action,其作者也承认对于复杂场景,Redux-Thunk并不适用,还推荐了Re ...

  9. dva的effect那么难用,自己造一个轮子吧

    背景 对于dva这个开发框架,国内从事react的前端工程师多半不会感到陌生,dva完善的开发体系和简单的api,让其被广泛运用到实际工作中.我所在的公司也是长期使用dva作为基础的开发框架,虽然好用 ...

随机推荐

  1. 翻页bug 在接口文档中应规范参数的取值区间 接口规范

    <?php$a=array("red","green","blue","yellow","brown&q ...

  2. GDB 简单学习

    一般来说,GDB主要帮忙你完成下面四个方面的功能:       1.启动你的程序,可以按照你的自定义的要求随心所欲的运行程序.     2.可让被调试的程序在你所指定的调置的断点处停住.(断点可以是条 ...

  3. 洛谷P1858

    \({\mathcal{For}}\) \({\mathcal{we}\ }\)\({\mathcal{live}\ }\)\({\mathcal{by}\ }\)\({\mathcal{faith} ...

  4. Folly解读(零) Fbstring—— 一个完美替代std::string的库

    string 常见的三种实现方式 eager copy COW SSO Fbstring 介绍 Storage strategies Implementation highlights Benchma ...

  5. Linux 使用Vmware克隆,修改克隆机器内容

    在Vmware中搭建好一台虚拟机,拍照快照,然后克隆其他集群进行练习,克隆后的机器都需要修改的内容有如下几点: 1:各机器之间,在网络上能够互相ping通 每台机器的IP地址必须是唯一的. 进入 ca ...

  6. 31.FTP简介

    1.FTP 是一种在互联网中进行文件传输的协议,基于客户端/服务器模式,默认使用20.21号端口,其中端口20(数据端口)用于进行数据传输,端口21(命令端口)用于接受客户端发出的相关FTP 命令与参 ...

  7. 什么?还不懂c++vector的用法,你凭什么勇气来的!

  8. Codeforces Round #640 (Div. 4)

    比赛链接:https://codeforces.com/contest/1352 A - Sum of Round Numbers 题意 将一个十进制数的每一个非零位分离出来. 代码 #include ...

  9. 【uva 1349】Optimal Bus Route Design(图论--网络流 二分图的最小权完美匹配)

    题意:有一个N个点的有向带权图,要求找若干个有向圈,使得每个点恰好属于一个圈.请输出满足以上条件的最小权和. 解法:有向圈?也就是每个点有唯一的后继.这是一个可逆命题,同样地,只要每个点都有唯一的后继 ...

  10. hdu 6795 Little W and Contest 并查集+排列组合

    题意: t组输入,有n个人,刚开始谁也不认识谁.每一个人有一个权值w[i](1<=w[i]<=2),你要挑选3个互相不认识的人组成一个队,且要保证3个人权值之和大于等于5(也就意味着最少要 ...