Redux处理异步的中间件redux-saga

2019-10-18 本文已影响0人虚拟J

有关于异步处理，通用解决方案有这些： redux-thunk，redux-promise，redux-saga
最后为什么选择了redux-saga，因为thunk 和 promise 都有的问题是：他们改变了 action 的含义，使得 action 变得不那么纯粹了。

redux-saga 是一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的 library，它的目标是让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。

Effect 被称为副作用，在我们的应用中，最常见的就是异步操作。它来自于函数编程的概念，之所以叫副作用是因为它使得我们的函数变得不纯，同样的输入不一定获得同样的输出。

redux-saga 是一个 redux 中间件，意味着这个线程可以通过正常的 redux action 从主应用程序启动，暂停和取消，它能访问完整的 redux state，也可以 dispatch redux action。

启动运行 Sagas：

import { createStore, , applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import reducer from './reducers'

//要运行的 Sagas
import sagas from './sagas'

//创建一个 Saga middleware
const sagaMiddleware = createSagaMiddleware()

const store = createStore(
  reducer,
// 将 middleware 连接至 Store
  applyMiddleware(sagaMiddleware)
)
//运行 Sagas
sagaMiddleware.run(sagas)
//执行 
store.dispatch(action)

applyMiddleware(...middleware)是一种推荐用来扩展 Redux的方式，告诉 createStore() 如何处理中间件，让你包装 store 的 dispatch方法来达到你想要的目的。

创建一个 Saga:

saga被实现为Generator函数 (我梳理的Generator 函数)，让异步的流程更易于读取，写入和测试。通过这样的方式，这些异步的流程看起来就像是标准同步的 Javascript 代码。

//只是单纯的创建了saga，打印了一条消息，没有进行异步调用
function* helloSaga() {
  console.log('Hello Sagas!');
}

Sagas的基本使用：

Effect 是一个简单的对象，这个对象包含了一些给 middleware 解释执行的信息，可以把 Effect 看作是发送给 middleware 的指令以执行某些操作（调用某些异步函数，发起一个 action 到 store，等等）。
Effect 创建器：创建一个 Effect 描述信息，只返回一个普通 Javascript 对象，并不会执行任何操作。执行是由 middleware进行的，middleware会检查每个 Effect 的描述信息，并进行相应的操作。
Saga 辅助函数：是构建在 Effect 创建器之上的辅助函数。（即高级 API）

执行dispatch：put(action)

创建一个 Effect 描述信息，用来命令 middleware 向 Store 发起一个 action( 这个 effect 是非阻塞型的 )。

import { put } from 'redux-saga/effects'

function* example() {
  yield put({ type: 'CHESTNUT' })
}

阻塞与非阻塞形式调用：call(fn, ...args)，fork(fn, ...args)

fork和call共同点：
都是创建一个 Effect 描述信息，用来命令 middleware以参数 args 调用函数 fn（fn可以是一个普通函数，也可以是一个Generator函数）
fork和call区别点：
call：是一个会阻塞的 Effect，即 Generator 在调用结束之前不能执行或处理任何其他事情。
fork：非阻塞调用的形式执行 fn（Generator 不会在等待 fn 返回结果的时候被 middleware 暂停，它在 fn 被调用时便会立即恢复执行）

import { take, put, fork ,call } from 'redux-saga/effects'
//一个工具函数 delay，用于阻塞执行 ms 毫秒，并返回 val 值。
//delay(ms, [val])
import { delay } from 'redux-saga'

function* example1() {
  yield call({delay , 1000})
  //过1秒后打印出'print call'
  console.log('print call')
}

function* chestnut() {
    yield fork({delay , 1000})
  //直接打印出'print fork'
    console.log('print fork')
}

监听action：take(pattern)

创建另一个命令对象，告诉 middleware 等待一个指定的 action。
在 take 的情况中，与 action 被推向任务处理函数不同，Saga 是自己主动拉取 action 的。

import { put, take } from 'redux-saga/effects'

//用户执行3次 CHESTNUT 后才会执行 CHESTNUT_ONE，然后Generator 会被回收并且相应的监听不会再发生
function* chestnutOne() {
  for (let i = 0; i < 3; i++) {
    yield take('CHESTNUT_CREATION')
  }
    yield put({type: 'CHESTNUT_SUCCEED'})
}

function* chestnutTwo() {
//用户监听 2 个并发的 action，如果用户执行了CHESTNUT_ONE或CHESTNUT_TWO，则会执行 CHESTNUT_ONE
  while (true) {
    yield take(['CHESTNUT_ONE', 'CHESTNUT_TWO'])
    yield put({type: 'CHESTNUT_NUM'})
  }
}

sagas辅助函数：takeEvery(pattern, saga, ...args) ,takeLatest(pattern, saga, ...args)

sagas辅助函数是使用 take 和 fork 构建的高级 API

takeEvery()：会存在多个 saga任务

import {  fork , take } from 'redux-saga/effects'
import { takeEvery } from 'redux-saga'

function* onesaga(action) {
  ...
}

function* chestnutOne() {
  yield takeEvery('CHESTNUT_REQUESTED', onesaga)
}

//takeEvery用低阶 Effects 的实现
const takeEvery = (pattern, saga, ...args) => fork(function*() {
  while (true) {
    const action = yield take(pattern)
    yield fork(saga, ...args.concat(action))
  }
})

takeLatest()：只会存在一个 saga任务，会自动取消之前已经启动但仍在执行中的 saga 任务。

import {  fork , take ,cancel } from 'redux-saga/effects'
import { takeLatest } from 'redux-saga'

function* onesaga(action) {
  ...
}
function* chestnutTwo() {
  yield takeLatest('CHESTNUT_REQUESTED', onesaga)
}

//takeLatest 用低阶 Effects 的实现
const takeLatest = (pattern, saga, ...args) => fork(function*() {
  let lastTask
  while (true) {
    const action = yield take(pattern)
    if (lastTask) {
      yield cancel(lastTask) // 如果任务已经结束，则 cancel 为空操作
    }
    lastTask = yield fork(saga, ...args.concat(action))
  }
})

关于同时启动多个任务：

同时启动多个任务，等待所有的 effects 都执行完毕，或者当一个 effect 被拒绝（就像 Promise.all 的行为）

const [one, two] = yield [
  call(fetch, '/one'),
  call(fetch, '/two')
]

同时启动多个任务，不等待所有effects都执行完毕。在多个 Effect 间运行竞赛（Race）（与 Promise.race([...]) 的行为类似），只拿第一个被 resolve（或 reject）的任务。（注意：race 它会自动取消那些失败的 Effects）

import { race } from 'redux-saga/effects'

//在请求返回之前，可触发CANCEL_FETCH action取消该请求
function* chestnut{
  const { response, cancel } = yield race({
    response: call(fetch),
    cancel: take('CANCEL_FETCH')
  })
}

取消任务：cancel(task)

一旦任务被 fork，可以使用 yield cancel(task) 来中止任务执行，取消正在运行的任务。

import { take, fork, cancel } from 'redux-saga/effects'

function* chestnut() {
  while(true) {
    const task = yield fork(fetch)
    yield take('STOP')
    yield cancel(task)
  }
}

最后整合sagas：

import {all} from 'redux-saga/effects'

//一个入口点，立即启动所有的Sagas
export default function* sagas() {
  yield all([
    example(),
    example1()，
  // more sagas
  ])
}

更多具体详细查看API文档

现在redux项目中的一些问题是：

概念太多，并且 reducer, saga, action 都是分离的，需要在 reducer, saga, action 之间来回切换，编辑成本高。
在真实的项目应用 redux 中，除了 redux store 的创建，中间件的配置，路由的初始化，Provider 的 store 的绑定，saga 的初始化，还要处理 reducer, component, saga 的 HMR（hot module replacement 模块热替换），看起来比较复杂。
......

有没有更好的简化方案呢？React + Redux最佳实践实现的framework——dva