美文网首页
redux-saga

redux-saga

作者: 考拉程序媛 | 来源:发表于2019-09-27 14:47 被阅读0次

    Redux-saga主要用来执行数据流中的异步操作。主要通过ES6中的generator函数和yield关键字来以同步的方式实现异步操作。
    在saga的Middleware中,可以使用takeEvery或者takeLatest等API来监听某个action,当某个action触发后,saga可以使用call、fetch等api发起异步操作,操作完成后使用put函数触发action,同步更新state,从而完成整个State的更新。
    先从 redux 的三原则谈起:
    [https://www.cnblogs.com/fe-linjin/p/11134680.html]

    唯一的状态源:Store
    唯一触发状态修改的方法: Action
    唯一转换状态的纯函数: Reducer
    [https://www.jianshu.com/p/f3c7594c4fb4]
    redux-saga 可以被看作是后台运行的进程,监听发起的 action ,决定该 action 是进行异步调用,还是触发其他的 action 发送到 Store
    此时 action 依然是 action 纯对象,而不是函数。(与 redux-thunk 不同)
    假设 Api.fetch 函数返回的 Promise 的状态是 rejected。只需使用 try/catch 语法将 PRODUCTS_REQUEST_FAILED action 发送给 Store
    接口 put 来处理分发 action,以此生成分发效用对象
    Saga 中不生成立即执行的异步函数,使用函数调用的描述来替代。
    takeEvery
    用来监听action,每个action都触发一次,如果其对应是异步操作的话,每次都发起异步请求,而不论上次的请求是否返回。
    takeLatest
    作用同takeEvery一样,唯一的区别是它只关注最后,也就是最近一次发起的异步请求,如果上次请求还未返回,则会被取消。
    call用来调用异步函数,将异步函数和函数参数作为call函数的参数传入,返回一个js对象。
    call函数也可以指定this对象,只要把this对象当第一个参数传入call方法
    call一般用来完成异步操作,cps可以用来完成耗时比较长的io操作
    put是saga对Redux中dispatch方法的一个封装,调用put方法后,saga内部会分发action通知Store更新state。
    有两种方式来处理请求失败的情况,一种是使用try-catch方法,将错误抛出;另一种是使用变量缓存成功失败的状态。
    take只有在执行流达到时才会响应对应的action,而takeEvery则一经注册,都会响应action。
    fork是非阻塞的 ,当调用fork启动一个任务时,该任务在后台继续执行,从而使得我们的执行流能继续往下执行而不必一定要等待返回。
    cancel的作用是用来取消一个还未返回的fork任务
    如果有一个call操作失败或者所有call操作都成功返回,则本次all操作执行完毕。
    all提供了一种并行执行异步请求的方式。
    race
       有时候当我们并行的发起多个异步操作时,我们并不一定需要等待所有操作完成,而只需要有一个操作完成就可以继续执行流。
    需要对action的有序处理的话,可以使用actionChannel函数来创建一个action的缓存队列,但一个action的任务流程处理完成后,才可是执行下一个任务流。

    Throttling
    用来防止连续不断的响应某个事件
    Debouncing
    延时执行,使用delay函数实现

    相关文章

      网友评论

          本文标题:redux-saga

          本文链接:https://www.haomeiwen.com/subject/swdwuctx.html