Redux saga

最新推荐文章于 2023-01-03 19:06:46 发布

barnett_y

最新推荐文章于 2023-01-03 19:06:46 发布

阅读量861

点赞数

分类专栏：【Redux Mobx Saga 点滴知识】

【Redux Mobx Saga 点滴知识】专栏收录该内容

178 篇文章 0 订阅

订阅专栏

如何使用saga：

1.使用createSagaMiddleware方法创建saga 的Middleware

const sagaMiddleware = createSagaMiddleware()

2.在创建的redux的store时，使用applyMiddleware函数将创建的saga Middleware实例绑定到store上.

applyMiddleware(sagaMiddleware,middleware)

3.最后可以调用saga Middleware的run函数来执行某个或者某些Middleware。

const store = createStoreWithMiddleware(rootReducer);
sagaMiddleware.run(rootSaga);

原理：

在saga中，我们可以使用takeEvery或者takeLatest等API来监听某个action，当某个action触发后，saga可以使用call、fetch等api发起异步操作，操作完成后使用put函数触发action，同步更新state，从而完成整个State的更新。

例子1：

action

export function requireDatas(reddit) : Action{
    return {
        type:GETDATA,
        reddit
    }
}
export function isLoading() : Action{
    return {
        type:ISLOADING,
        proload: true
    }
}
export function receiveDatas(reddit) : Action{
    return {
        type:RECEIVEDATAS,
        reddit
    }
}

当点击按钮，dispatch requireDatas 这个action，然后异步获取数据，然后，更新state。

设置saga：

export  function getDataApi(reddit){
    let res =  axios.get('http://localhost:3000/getData',{params:reddit.reddit})
    return res;
}

export  function* requireDatas(reddit){
    yield put( actions.default.isLoading() )
    const params = yield call(getDataApi, reddit);
    yield put( actions.default.receiveDatas(params.data) )
}
export  function* watchGetData(){
     yield takeEvery(GETDATA,requireDatas)
}

takeEvery监听'GETDATA'，当分发这个action的时候，执行requireDatas。

requireDatas：使用call 调用getDataApi获取数据，然后执行put方法，相当于dispatch 'RECEIVEDATAS' 这个action，从而state发生改变。

API

takeEvery

用来监听action。当监听到出发此action的时候，如果执行异步操作的话，无论第一次异步是否完成，当发生第二次的时候，都会继续执行。

export  function* requireDatas(reddit){
    const params = yield call(getDataApi, reddit);
    yield put( actions.default.receiveDatas(params.data) )
}
export  function* watchGetData(){
     yield takeEvery(GETDATA,requireDatas)
}

在上面的例子中，takeEvery 允许多个 requireDatas实例同时启动。即使第一个还没结束，第二个依然会启动。

takeLatest

作用同takeEvery一样，唯一的区别是它只关注最后，也就是最近一次发起的异步请求，如果上次请求还未返回，则会被取消。

export  function* watchGetData(){
     yield takeLatest(GETDATA,requireDatas)
}

只执行最后一次出发的 requireDatas；

put

yield put({ type: 'PRODUCTS_RECEIVED', products })

相当于dispatch({ type: 'PRODUCTS_RECEIVED', products })

call

call用来调用异步函数，将异步函数和函数参数作为call函数的参数传入，返回一个对象。

saga引入他的主要作用是方便测试，同时也能让我们的代码更加规范化。

export  function getDataApi(reddit){
    let res =  axios.get('http://localhost:3000/getData',{params:reddit.reddit})
    return res;
}
export  function* requireDatas(reddit){
    const params = yield call(getDataApi, reddit);
    yield put( actions.default.receiveDatas(params.data) )
}

apply

saga同样提供apply函数，作用同call一样，参数形式同js原生apply方法。

cps

同call方法基本一样，但是用处不太一样，call一般用来完成异步操作，cps可以用来完成耗时比较长的io操作等。

cps(fn, ...args)

fn: Function - 一个 Node 风格的函数。即不仅接受它自己的参数，fn 结束后会调用一个附加的回调函数。回调函数接受两个参数，第一个参数是报错信息，第二个是成功的结果。

args: Array - 一个数组，作为 fn 的参数

参考自官方文档

fork

非阻塞任务调用机制：相对于generator函数来说，call操作是阻塞的，只有等promise回来后才能继续执行，而fork是非阻塞的，当调用fork启动一个任务时，该任务在后台继续执行，从而使得我们的执行流能继续往下执行而不必一定要等待返回。

我们可以把上面的例子换成：

function* loginFlow() {
  while(true) {
    const {user, password} = yield take('LOGIN_REQUEST')
    const task = yield fork(authorize, user, password)
    const action = yield take(['LOGOUT', 'LOGIN_ERROR'])
    if(action.type === 'LOGOUT')
      yield cancel(task)
    yield call(Api.clearItem('token'))
  }
}

take

takeEvery 在每个 action 来到时派生一个新的任务，它只是监听每个action，然后执行处理函数。被调用的任务无法控制何时被调用，它们将在每次 action 被匹配时一遍又一遍地被调用。并且它们也无法控制何时停止监听。

而take则不一样，我们可以在generator函数中决定何时响应一个action，以及一个action被触发后做什么操作。

export  function fetchPostsApi(reddit){
    let res =  axios.get('http://localhost:3000/getData',{params:reddit.reddit})
    return res;
}

export  function* requireDatas(reddit){
    yield put( actions.default.isLoading() )
    const params = yield call(fetchPostsApi, reddit);
    yield put( actions.default.receiveDatas(params.data) )
}
export  function* watchGetData(){
     while(true) {
        const params = yield take(GETDATA);
        yield fork(requireDatas,params)
     }
     // yield takeEvery(GETDATA,requireDatas)
}

cancel

cancel的作用是用来取消一个还未返回的fork任务。防止fork的任务等待时间太长或者其他逻辑错误。

call

类似Promise中的all操作,可以将多个异步操作作为参数参入all函数中，如果有一个call操作失败或者所有call操作都成功返回，则本次all操作执行完毕。

const [users, repos]  = yield all([
  call(fetch, '/users'),
  call(fetch, '/repos')
])

race

类似Promise中的race操作,可以将多个异步操作作为参数参入race函数中，如果有一个race操作失败或者成功，则本次race操作执行完毕。

yield race({
      task: call(backgroundTask),
      cancel: take('CANCEL_TASK')
    })

Interface Task

Task 接口指定了通过 fork，middleware.run 或 runSaga 执行 Saga 的结果。

task.isRunning() 如果任务还未返回或抛出了一个错误则返回 true

task.result() 任务的返回值。如果任务正在执行中则返回 undefined
task.error() 任务抛出的错误。如果任务正在执行中则返回 undefined

task.done 一个 Promise，以下二者之一：

以任务的返回值 resolve

以任务抛出的错误 reject

task.cancel() 取消任务（如果任务还在执行中）

actionChannel

在之前的操作中，所有的action分发是顺序的，但是对action的响应是由异步任务来完成，也即是说对action的处理是无序的。

如果需要对action的有序处理的话，可以使用actionChannel函数来创建一个action的缓存队列，但一个action的任务流程处理完成后，才可是执行下一个任务流。

function* watchRequests() {
  // 1- Create a channel for request actions
  const requestChan = yield actionChannel('REQUEST')
  while (true) {
    // 2- take from the channel
    const {payload} = yield take(requestChan)
    // 3- Note that we're using a blocking call
    yield call(handleRequest, payload)
  }
}