redux-Saga的理解

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

和redux-thunk的区别

它是一个redux的中间件，和redux-thunk还是有一些本质上的区别：

redux-thunk是一个常见的去处理异步的中间件，但是说如果很多个服务端请求，但是它没有依赖性，必须要要先一个一个执行，用redux-thunk去处理的方法是用嵌套或者循环，但是嵌套依赖性越多，回调也会越来越多 那这种问题的解决方式是用同步的方式解决异步，这就可以用redux-saga来实现，因为它里边的yield对象可以起到一个阻断的作用~

什么是redux-saga

简单总结来说，它是一个generator函数，其实是函数名和关键字之间加了星号，可以再函数内使用yield关键字

它在saga内做的事情是组合用到的所有effect，实现一个控制流，但是这个控制流，跟普通函数不一样的地方是它是惰性求值的方式

effect的作用

它实际上是一个对象，它在generator里yield纯JS对象表达saga的逻辑

简单来说是：用yiled来定义不同对象，来实现想要的控制流

常见的effect有哪些

take

它创建了一个命令对象，但是没有从开始到结束的能力，所以该函数将在堵塞住的时候运行。

function test(){
    white(true){
        const action = yield take(TEST)
        yield fork(Test,action)
    }
}

call与fork

在saga中，可以用fork和call来调用子saga，他们两个非常相似，但区别在于阻塞和无阻塞调用

阻塞是挡住了后面代码的执行 无阻塞是不影响下面的代码执行

• call call是有阻塞执行，意味着用回调的话，要等前面执行完成后才能往下走

put

它是一个函数，用于修改redux Store中的状态值，简单来说是redux中的dispatch的封装，它判断了是否有channel如果有的话则执行put，没有则执行dispatch

yield put({type:TEST})
function runPut(env,{channel,action,resolve},cb){
    app(()=>{
        let result;
        result = (channel ? channel.put : env.dispatch)(action)
    })
}

如果它为true的话实际调用的是

channel控制了effect和仓库的联系

最后

对上述内容的总结：

1. saga 是一个gennerator函数
2. effect是函数对象
3. channel概括了effect函数和saga的通信