React之 8 应⽤redux-saga改造路由守卫登录认证

8.1 redux-saga与redux-thunk

• redux-saga是⼀个⽤于管理redux应⽤异步操作的中间件
  redux-saga通过创建sagas将所有异步操作逻辑收集在⼀个地⽅集中处理，可以⽤来代替redux-thunk中间件
• 作用：
  reducer负责处理action的stage更新
  sagas负责协调那些复杂或者异步的操作
• redux-saga可以处理各种复杂的异步操作，redux-thunk适⽤于简单的异步操作场景
• redux-saga使⽤generator解决异步问题，使⽤同步⽅式编写异步代码，解决回调地域问题
• redux-thunk可以接受function类型的action，⽽redux-saga则是纯对象action的解决⽅案

安装redux-saga：
npm install redux-saga -S

8.2 Generator⽣成器
实例1

function* g() {
   
  yield "a";
  yield "b";
  yield "c";
  return "ending";
 }
 console.log(g());//返回迭代器Iterator

执行结果：

Object [Generator] {}

实例2

function* g() {
   
  yield "a";
  yield "b";
  yield "c";
  return "ending";
 }
 const gen = g();
 console.log(gen.next()) // 返回结果对象

执行结果：

// value是yield后⾯表达式的结果
{ value: 'a', done: false }

实例3

function* g() {
   
  yield "a";
  yield "b";
  yield "c";
  return "ending";
 }
 const gen = g();
 console.log(gen.next()) 
 console.log(gen.next())
 console.log(gen.next())
 console.log(gen.next())

执行结果：

{ value: 'a', done: false }
{ value: 'b', done: false }
{ value: 'c', done: false }
{ value: 'ending', done: true }

实例4

function* g() {
   
  yield "a";
  yield "b";
  yield "c";
  return "ending";
 }
 const gen = g();
 function next(){
   
  let {
    value, done } = gen.next() // 启动
  console.log(value) // 依次打印输出 a b c end
  if(!done) next() // 直到迭代完成
 }
 next()

执行结果：

a
b
c
ending

实例5

function* say() {
   
  let a = yield '1'
  console.log(a)
  let b = yield '2'
  console.log(b)
 }
 let it = say() // 返回迭代器
 console.log(it.next())
 console.log(it.next('我是被传进来的1'))
 console.log(it.next('我是被传进来的2'))

执行结果：

{ value: '1', done: false }
我是被传进来的1
{ value: '2', done: false }
我是被传进来的2
{ value: undefined, done: true 

实例6 结合promise
1

// 使⽤Generator顺序执⾏两次异步操作
function* r(num) {
   
  const r1 = yield compute(num)
  yield compute(r1)
}

// compute为异步操作，结合Promise使⽤可以轻松实现异步操作

function compute(num) {
   
  return new Promise(resolve