dva model的effect的不同类型使用介绍

悠悠 2022-02-23 00:04 260阅读 0赞

### dva model的effect的不同类型 使用介绍 ###

*   *  官方的一些介绍
     *  takeEvery
     *  takeLatest
     *  throttle（消抖）
     *  watcher
     *  参考资料

## 官方的一些介绍 ##

*  effect说明  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70_pic_center]
 *  使用说明  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70_pic_center 1]  
    这几个值是用来干嘛的呢？

## takeEvery ##

> 在发起（dispatch）到 Store 并且匹配 pattern 的每一个 action 上派生一个 saga

`解释一下就是，在你dispatch 一个effects action的时候，他会去找到你的effect里面定义的对应的函数，每dispatch一次就执行一次， 这是个默认值所有的以gernerate function 定义的effects都是默认type都是takeEvery`

## takeLatest ##

> 在发起到 Store 并且匹配 pattern 的每一个 action 上派生一个 saga。并自动取消之前所有已经启动但仍在执行中的 saga 任务。

`这个就是说如果你多次dispatch同一个action的话，在dispatch的时候，saga任务队列里面有这个action就会取消掉上次的action，开始执行本次的action`

*  定义方式为  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70_pic_center 2]

## throttle（消抖） ##

> 在发起到 Store 并且匹配 pattern 的一个 action 上派生一个 saga。 它在派生一次任务之后，仍然将新传入的 action 接收到底层的 buffer 中，至多保留（最近的）一个。但与此同时，它在 ms 毫秒内将暂停派生新的任务 —— 这也就是它被命名为节流阀（throttle）的原因。其用途，是在处理任务时，无视给定的时长内新传入的 action

`这个和lodash 里面的throttle函数类似，节流函数，如果一个action连续被dispatch，那么他会每隔定义时间执行一次`

*  定义方式为  
    ![在这里插入图片描述][20190405141950203.png_pic_center]

## watcher ##

> 传入的任务函数就是一个watcher直接fork就好

`简单理解为在初始化的执行一次，后续的dispatch也不会触发`

*  使用方式  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]

## 参考资料 ##

1.  [dva源码解析（一）][dva]
2.  [redux-saga中文api文档][redux-saga_api]
3.  [Dva 源码解析][Dva]
4.  [dva effects.test.js][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70_pic_center]: /images/20220223/e34ede8c779b4b47a4b54a7336dbd55b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220223/b4b9b22193a24e7aab0488e11acb79d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20220223/87c513db793f437e980721c429eb683d.png
[20190405141950203.png_pic_center]: /images/20220223/18a6dc5ad7d34ce09a4f7b941ea801d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]: /images/20220223/18960bbd95b54792972a5a70e16cbb67.png
[dva]: https://www.cnblogs.com/Chasel-Chen/p/9550188.html
[redux-saga_api]: https://redux-saga-in-chinese.js.org/docs/api/
[Dva]: https://github.com/dvajs/dva/blob/e3b603a2aa62f796a21577b6c768800316d42bc4/docs/guide/source-code-explore.md
[dva effects.test.js]: https://github.com/dvajs/dva/blob/master/packages/dva-core/test/effects.test.js