項(xiàng)目地址：
https://github.com/iosKey/redux-saga

概述：
redux-saga是副作用（數(shù)據(jù)獲取、瀏覽器緩存）易于管理、執(zhí)行、測試和失敗處理

安裝路由
yarn add react-router-dom -S
安裝redux-saga
npm install --save redux-saga
yarn add redux-saga -S
安裝react-redux
yarn add react-redux -S
安裝redux-thunk
yarn add redux-thunk -S

store.js saga為中間件的形式接入，配置createStore使用

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import createSagaMiddleware from "redux-saga";
import mySaga from "./MySaga";

const loginInfo = {
  isLogin: false,
  loading: false,
  err: "",
  user: {
    name: ""
  }
};
function loginReducer(state = { ...loginInfo }, action) {
  switch (action.type) {
    case "getUserInfo":
      return { ...loginInfo, loading: true };
    case "loginSuccess":
      return {
        ...state,
        loading: false,
        isLogin: true,
        user: { name: "xiaomi" }
      };
    case "loginFailed":
      return {
        ...state,
        loading: false,
        err: action.err,
        isLogin: false,
        user: { name: "" }
      };
    default:
      return { ...state };
  }
}

const sagaMw = createSagaMiddleware();

const store = createStore(
  combineReducers({
    user: loginReducer
  }),
  // applyMiddleware(thunk)
  applyMiddleware(sagaMw)
);
sagaMw.run(mySaga);

export default store;

MySaga.js 當(dāng)點(diǎn)擊登錄的時候 saga用takeEvery監(jiān)聽action,然后寫對應(yīng)的邏輯函數(shù) put方法實(shí)際就是reducer dispatch更新狀態(tài),call方法做異步處理

//call調(diào)用異步操作 put狀態(tài)更新 takeEvery做saga監(jiān)聽
import { call, put, takeEvery } from "redux-saga/effects";
//說白了saga是用于異步的 用來代替thunk
//模擬登錄接口
const UserService = {
    login(name){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                if(name === '小明'){
                    resolve({name: '小明'});
                }else{
                    reject("用戶名或密碼錯誤")
                }
            },1000);
        });
    }
}

function *loginHandle(action){
    try {
        //先loading起來
       yield put({type: 'getUserInfo'})
        //調(diào)用UserService的login方法 傳參action.name 異步操作
       const res = yield call(UserService.login,action.name); 
       //更新狀態(tài) 做dispatch操作
       yield put({type: 'loginSuccess'})
    } catch (err) {
       yield put({type: 'loginFailed',err})
    }
}

function* mySaga() {
    //拿到action里面的type值 把a(bǔ)ction傳給loginHandle
    yield takeEvery("login", loginHandle);
  }

export default mySaga;