1 概述

redux-saga 是 redux 一个中间件，用于解决异步问题。

2 需求

2.1 10秒自动请求一次接口、当有新消息显示通知框、并在通知图标显示红色角标

2.2 只要有未读的消息时、icon菜单图标要显示红色角标

2.3 当点击全部已读时、要实时获取剩余未读消息数量当接口、当未读消息为0取消icon角标

3 技术支持

当时想当必须用redux、通过查看前辈写当代码、发现运用到了redux-sage、但此前并未运用到、所以只能现学爬坑

4 代码实现

代码结构

业务UI页面、引入actions触发对应的方法、执行对应的ActionTyoes

notice为通知的逻辑

notice写执行对应的ActionTyoes并导出

依次为方法、成功的回调、失败的回调

yield call 创建一个请求

yield put 为将成功的值放入redux、type为只在成功的时候

然后将其导出 yield all 

引入页面及方法

reducers  notice为成功时将数据放入redex state中

5 碰到的问题

当点击全部已读调用 redux中 shareGetNotice时报错

当时找了很久很久的原因、竟然是命名的问题

上图中、createActions里的第一行为错误命名方法、第二行为正确的、一定要确保和导出的方法一样的命名规则方可