redux-saga

redux-saga

redux-saga是管理redux异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑 收集在一个地方集中处理,便于后期维护，让异步流程更加易于读取，写入和测试，通过这种方式，让异步看起来更像同步的javaScript（有点像async/await）

redux-saga常见的API

Middleware API

createSagaMiddleware()创建一个 Redux middleware，并将 Saga连接到 Redux Store。

import createSagaMiddleware from 'redux-saga'
var   SagaMiddleware=createSagaMiddleware()
const store  =createStore(reduce,applyMiddleware(SagaMiddleware))

middleware.run(saga)

动态地运行 saga。只能 用于在 applyMiddleware阶段 之后 执行 Saga。

saga: Function: 必须是一个返回 Generator 对象 的函数

args: 提供给 saga 的参数

import createSagaMiddleware from 'redux-saga'
import   {helloSaga} from './sagas/index'
var   SagaMiddleware=createSagaMiddleware()
const store  =createStore(reduce,applyMiddleware(SagaMiddleware))
​
export default store
​
SagaMiddleware.run(helloSaga)

Saga 辅助函数

takeEvery,takeLatest,throttle都会监听action

takeEvery(pattern, saga, ...args)在发起（dispatch）到 Store 并且匹配 pattern 的每一个 action 上派生一个 saga

• pattern:创建一个 Effect 描述信息，用来命令 middleware 在 Store 上等待指定的 action。 在发起与 pattern 匹配的 action 之前，Generator 将暂停。

• saga: Function - 一个 Generator 函数

    yield takeEvery("takeEvery", function* () {
     yield console.log('takeEvery');
    });
  

takeLatest(pattern, saga, ...args)在发起到 Store 并且匹配 pattern 的每一个 action 上派生一个 saga。并自动取消之前所有已经启动但仍在执行中的 saga 任务。

• pattern:创建一个 Effect 描述信息，用来命令 middleware 在 Store 上等待指定的 action。 在发起与 pattern 匹配的 action 之前，Generator 将暂停。
• saga: Function - 一个 Generator 函数

  yield takeLatest("takeLatest", function* () {
   yield console.log('takeLatest');
  });

throttle(ms, pattern, saga, ...args)在发起到 Store 并且匹配 pattern 的一个 action 上派生一个 saga。 它在派生一次任务之后，仍然将新传入的 action 接收到底层的 buffer 中，至多保留（最近的）一个。但与此同时，它在 ms 毫秒内将暂停派生新的任务 —— 这也就是它被命名为节流阀（throttle）的原因。其用途，是在处理任务时，无视给定的时长内新传入的 action。

• ms: Number - 在 action 开始处理后，无视新 action 的时长；以毫秒为单位。
• pattern:创建一个 Effect 描述信息，用来命令 middleware 在 Store 上等待指定的 action。 在发起与 pattern 匹配的 action 之前，Generator 将暂停。
• saga: Function - 一个 Generator 函数

• yield throttle(2000, "throttle", function* () {
   yield console.log('throttle');
  });
  

Effect 创建器

take(pattern)

take函数可以理解为监听未来的action，它创建了一个命令对象，告诉middleware等待一个特定的action， Generator会暂停，直到一个与pattern 匹配的action被发起，才会继续执行下面的语句，也就是说，take是一个阻塞的 effect

  yield  take('wwwww')
  yield takeEvery("takeEvery", function* () {
   yield console.log('takeEvery',state);
  });

call(fn, …args)

call函数你可以把它简单的理解为就是可以调用其他函数的函数，它命令 middleware 来调用fn 函数， args为函数的参数,call 函 数也是阻塞 effect

​
yield takeEvery("takeEvery", function* () {
    const res = yield fork(axios.get, `http://localhost:3000/zbf/takeEvery`, {
      // params:{...state}
      params: { index: i },
    });
   yield console.log('takeEvery',res);
  });

select(selector, …args)

select 函数是用来指示 middleware调用提供的选择器获取Store上的state数据，你也可以简单的把它理解为redux框架中获取store上的 state数据一样的功能 ：store.getState()

const state=yield select(state=>{
      return state.store.user
   })

put(action)

创建一个 Effect 描述信息，用来命令 middleware 向 Store 发起一个 action。 这个 effect 是非阻塞型的，并且所有向下游抛出的错误（例如在 reducer 中），都不会冒泡回到 saga 当中。

let i = 0;
  yield takeEvery("takeEvery", function* () {
    i++;
    const res = yield call(axios.get, `http://localhost:3000/zbf/takeEvery`, {
      params: { index: i },
    });
    yield console.log(res.data.index,'25takeEvery');
    yield put({
      type:"eeeee",
      index:res.data.index
    })
  });
​
​
case "eeeee":
      console.log(action.index,12345);
      return  {
          datas:action.index
      }
​
 componentDidUpdate(oldProps){
        console.log(this.props);
    }

Effect 组合器（combinators）

all([effects，effects])

创建一个 Effect 描述信息，用来命令 middleware 并行地运行多个 Effect，并等待它们全部完成。

import {classify} from './classity.js'
import {home} from './home.js'
import {
 all
} from "redux-saga/effects";
export function* defsaga(){
   yield  all([classify(),home()])
}

ctx.request.body

// router.get("/takeEvery", async function (ctx, next) {

// // console.log({...ctx.query},'123');

// ctx.body=ctx.query

// });