Redux saga异步管理与生成器详解

function *test(){
    console.log("11111",'第一次无效无值')
    let input1=yield "111-输出";
    console.log("2222",input1)
    let input2=yield "2-输出";
    console.log("1111213",input2)
    let input3=yield "3-输出";
    console.log("1111213",input3)
}

var pengke_test=test()

let res1=pengke_test.next('aaa')//执行一次就往yield下执行一段（第一次传值是无效的）
console.log(res1);

let res2=pengke_test.next('bbb')//通过变量接收yield的值即传的bbb值
console.log(res2);
let res3=pengke_test.next('cccc')
console.log(res3);
let res4=pengke_test.next()
console.log(res4);//当没有yield了就打印done为true，value=undefined

function getData1(){
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve('data1')
        }, 1000);
    })
}
function getData2(){
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve('data2')
        }, 1000);
    })
}
function getData3(){
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve('data3')
        }, 1000);
    })
}
function *gen(){
    let f1=yield getData1();
    console.log(f1);
    let f2=yield getData2(f1);
    console.log(f2);
    let f3=yield getData3(f2);
    console.log(f3);
}
function run(fn){
    let g=fn()
    function next(data){
        let result=g.next(data);
        if(result.done){
            return result.value
        }
        result.value.then(res=>{
            next(res)
        })
    }
    next()
}
run(gen)

import React, { Component } from 'react';
import store from './redux/store';
class App extends Component {
    render() {
        return (
            <div>
                <button onClick={()=>{
                    if(store.getState().list1.length===0){
                        //dispatch
                        store.dispatch({
                            type:"get-list"
                        })                        
                    }else{
                        console.log("缓存",store.getState().list1)
                    }
                }}>click-ajax-异步缓存</button>
            </div>
        );
    }
}
export default App;

function reducer(prevState={
    list1:[]
},action={}){
    var newState={...prevState}
    switch(action.type){
        case "change-list":
            newState.list1=action.payload;
            console.log("newState=",newState)
            return newState;
        default:
            return prevState;
    }
}
export default reducer

import {createStore,applyMiddleware} from 'redux'
import reducer from './reducer'
import createSagaMiddleWare from 'redux-saga'
import watchSaga from './saga';
const SagaMiddleWare=createSagaMiddleWare();//生成
const store= createStore(reducer,applyMiddleware(SagaMiddleWare))//应用
SagaMiddleWare.run(watchSaga)//saga任务,
export default store

/**
 * saga任务
 */
import {take,fork,put,call} from 'redux-saga/effects'
function *watchSaga(){
    while(true){
        //take 监听 组件发来的action
        yield take("get-list")
        //fork 同步执行异步处理函数
        yield fork(getList)
    }
}
function *getList(){
    //这里做异步处理的
    //call函数发异步请求
    let res= yield call(getListAction)//参数是返回值为promise对象的函数
   //等待call执行完才会执行
    yield put({
        type:'change-list',
        payload:res
    })
    //put函数发出新的action
}
function getListAction(){
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve(["123132","碰磕"])
        }, 2000);
    })
}
export default watchSaga

//原来:
 function *watchSaga2(){
      while(true){
         //take 监听 组件发来的action
          yield take("get-list2")
          //fork 同步执行异步处理函数
          yield fork(getList2)
      }
 }
//现在:
 function *watchSaga2(){
    //写法2
    yield takeEvery("get-list2",getList2)
 }

import {all} from 'redux-saga/effects'
import watchSaga1 from './saga/saga1';
import watchSaga2 from './saga/saga2';
function *watchSaga(){
    yield all([watchSaga1(),watchSaga2()])
}
export default watchSaga;