redux-sage笔记

2020-01-14 16:54:17 浏览数 (1)

前言：以前用redux处理异步状态都使用redux-thunk那个库。也一直听说redux-saga是个和redux-thunk能够实现类似功能的库，而且redux-saga的处理方法更加高压和方便。这几天阅读了下文档写些小结。

saga是用来分发action进行处理，使系统流程更加清晰。推荐使用Generator函数。

以下是一些saga的常用方法

redux/saga
  • takeEvery
    • yield* takeEvery('PRODUCTS_REQUESTED', fetchProducts)
    • 每当有PRODUCTS_REQUESTED的action分发的时候就执行fetchProducts函数，在这里fetchProducts函数也是Generator函数(tips:注意yield* 就是在Generator内执行另一个Generator函数)
    • takeEvery('*', function * xx(){/** ***/})表示匹配所有的action
  • takeLatest
    • 只执行最新的任务，之前如果有正在执行的任务则会被取消
redux-saga/effects

tips: effects纯文本Javascript对象 - call - call() 调用给定函数。注意的是，如果call调用fetch，在默认的fetch状态下返回的是Promise实例，但是由于是call调用，返回的是文本信息，可以直接调用 - put - put({type: 'INCREMENT'}) 发起一个action到store - take 第二个参数表示对应匹配的action所要执行的函数。第一个参数如果是数组的话，表示可以并发监听action - 可以更好的控制状态流 - 如下一个函数控制登陆和登出

代码语言：javascript复制
//一个简单的登陆逻辑实现
//这个是会被阻塞的
     function* loginFlow() {
      while(true) {
        const = {} = yield take('LOGIN')//左侧可以获取到这个action的一些信息
        // ... perform the login logic
        yield take('LOGOUT')
        // ... perform the logout logic
      }
    }

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

function* authorize(user, password) {
  try {
    const token = yield call(Api.authorize, user, password)
    yield put({type: 'LOGIN_SUCCESS', token})
    return token
  } catch(error) {
    yield put({type: 'LOGIN_ERROR', error})
  }
}

function* loginFlow() {
  while(true) {
    const {user, password} = yield take('LOGIN_REQUEST')
    const token = yield call(authorize, user, password)
    if(token) {
      yield call(Api.storeItem({token}))
      yield take('LOGOUT')
      yield call(Api.clearItem('token'))
    }
  }
}
  • fork
    • fork不阻塞后续的yield
  • cancel
    • 取消fork事务
代码语言：javascript复制
function* authorize(user, password) {
  try {
    const token = yield call(Api.authorize, user, password)
    yield put({type: 'LOGIN_SUCCESS', token})
    return token
  } catch(error) {
    if(!isCancelError(error))
      yield put({type: 'LOGIN_ERROR', error})
  }

function* loginFlow() {
  while(true) {
    const {user, password} = yield take('LOGIN_REQUEST');//监听登录请求
    const task = yield fork(authorize, user, password)//收到登陆请求后，发起认真。因为是fork所以是不阻塞下面的take['LOGOUT','LOGIN_ERROR']的
    const action = yield take(['LOGOUT', 'LOGIN_ERROR'])
    if(action.type === 'LOGOUT')
      yield cancel(task) //取消之前的fork事务。因为可能登录请求未成功我们就发起了登出的事件。取消fork事务的时候，会在authorize内抛出一个错误
    yield call(Api.clearItem('token'))//清空本地的token
  }
}
  • race
    • 用法：race({fun1,fun2})，某个fun执行完这个race就结束了
    • 除了第一个被race的Generator函数外，其它的Generator函数会结束并抛出异常
代码语言：javascript复制
function* backgroundTask() {
  while(true) { ... }
}

function* watchStartBackgroundTask() {
  while(true) {
    yield take('START_BACKGROUND_TASK')
    yield race({
      task: call(backgroundTask),
      cancel: take('CANCEL_TASK')//例如接受到CANCEL_TASK 的action的时候，backgroundTask函数内就会抛出异常
    })
  }
}
其它
  • yield [fun1,fun2] 并发执行fun1、fun2 相当于Promise.all 的功能，所有的fun都结束了才会结束这个yield
  • 被强行cancel的会抛出SagaCancellationException（在redux-sage下） 错误。未被捕获的话，这个错误是不会向上冒泡的

使用redux-saga来处理一些复杂的流程的时候似乎比较不错

redux python unix javascript node.js

0 人点赞