redux-saga和redux-thunk的区别与使用场景？

redux-thunk

实现思路
redux-thunk相当于是基于store的升级，一般情况，我们传给store的action是一个对象，但是通过redux-thunk中间件，我们可以把部分的业务逻辑（异步请求）等放在action中进行处理。当store接收到函数类型的action，redux-thunk会执行该函数，并传入参数dispatch，当函数内部的逻辑执行完成后，会再次派发一个action继续向下执行。

// store中的index.js文件

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reduer from "./reduer";

// 使用react-devtools的配置
const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
    applyMiddleware(thunk)
);

const store = createStore(reduer, enhancer);

export default store;

 

// store中的action文件

......
// 保存list数据的action
export const getListData = (data) => {
    return {
        type: GET_LIST_DATA,
        data
    }
}
// 异步通过接口获取list数据的action
export const getListDataAction = () => {
    // 默认store只能识别对象的action，但是使用了thunk，可以通过传入一个函数，在thunk中间件中会执行
    return (dispatch) => {
        axios.get("api/todolist").then(res => {
            const action = getListData(res.data);
            dispatch(action);
        }).catch((e) => {
            console.log("获取数据失败了", e)
        })
    }
}

redux-saga

实现思路
在store的index文件中创建saga中间件连接到store，saga中间件可以监控派发的action，如果有action.type值与监控的变量一致，则执行该函数的内容，在这个函数中也可以再次派发一个新的action。

 

// store中的index.js文件

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga'
import reduer from "./reduer";
import mySaga from './sagas'
// 创建saga中间件
const sagaMiddleware = createSagaMiddleware();

// react-devtools的配置
const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
    applyMiddleware(sagaMiddleware)
);

const store = createStore(reduer, enhancer);

// 执行saga中间件
sagaMiddleware.run(mySaga)

export default store;

// sagas.js 文件

import { put, takeEvery } from "redux-saga/effects";
import { GET_LIST } from "./actiontypes";
import { getListDataAction } from "./renderStore"
import axios from "axios";

// 获取数据的函数
function* getListData() {
  try {
    // 使用异步的方式，拿到请求的结果
    const res = yield axios.get("api/todolist");
    // 获取到新的action
    const action = getListDataAction(res.data);
    // 派发新的action
    yield put (action)
  } catch (error) {
    console.log("请求todolist数据失败了", error);
  }
}

// 监控派发内容是 GET_LIST，都要执行一次 getListData函数
function* mySaga() {
  yield takeEvery(GET_LIST, getListData);
}

export default mySaga;

使用场景

两者都是在发送后端请求需要使用异步代码的时候使用

区别

redux-thunk：通过执行action中的函数实现业务逻辑，没有拓展API
redux-saga：通过定义saga函数进行监控，同时提供一些常用的API
redux-thunk将部分异步处理业务逻辑写在action中，redux-sagasaga则是放在监控的函数中