接下来就是注册 saga 相关 side effect 操作。下面的文件是 fetchData.saga.js import { takeLatest, put } from "redux-saga/effects";function* fetchDataSaga(action){ try { const response = yield fetch(action.url); const data = yield response.json() yield put(fetchSuccess(data)); ...
function*loginOut(){yieldput({type:'loginSuccess',loginInfo:{success:false,name:'',password:''}})}// 监听登录登出sagafunction*watchLogin(){yieldtakeLatest('login',login)// 1,使用take等待类型loginOut的action的到来,take将阻塞当前Generatorconstaction=yieldtake('loginOut')// 2,take监听到类型log...
到目前为止,我们分别用 fork 和takeLatest 调用了这两个soga,其中takeLatest会暂停直到触发 “LOAD_DASHBOARD” Action。我们会在 step #3 中具体描述。 2. 在Redux store中插入Saga中间件 在我们定义并初始化 Redux store 的时候,我们常常这么做: const sagaMiddleware = createSagaMiddleware(); const store = ...
在redux-saga中,我们可以使用生成器函数来定义saga,生成器函数是一种特殊的函数,可以通过yield关键字来暂停和恢复函数的执行。 等待生成器是指在saga中使用yield关键字来暂停执行,并等待一个特定的事件或操作完成后再继续执行。在redux-saga中,常见的等待生成器包括take、takeEvery、takeLatest等。 take:take是一个等...
redux-sage和redux-thunk类似都是redux的中间件,都用于处理异步操作。redux-saga使用ES6的Generator功能,避免了redux-thunk的回调写法,并且便于测试。 下面展示了最简单是使用示例 import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'import Api from'...'//worker Saga : 将在 USER_FETCH_...
说到中间件redux-saga,肯定会想起其他类似的redux-thunk、redux-promise,后俩者只是为了解决redux过程中异步网络加载问题,但它们并不会监听action,而redux-saga提供了take系列方法:take、takeEvery、takeLatest用来监听dispatch事件,有些人可能有些不明白,监听action是store的任务,redux-saga不是多管闲事吗!
接下来就是注册 saga 相关 side effect 操作。下面的文件是 fetchData.saga.js import{takeLatest,put}from"redux-saga/effects";function*fetchDataSaga(action){try{constresponse=yieldfetch(action.url);constdata=yieldresponse.json()yieldput(fetchSuccess(data));}catch(error){console.log(error);}}exportde...
takeEvery当匹配到action的时候,执行一个saga takeLatest当匹配到action的时候,取消上个同action的saga并执行一个新的sag sagas 我们把一系列任务的控制链的集合称之为saga,这也是我们任务链的入口,这是一个generator函数,我们能够通过yield来逐个执行我们的子任务(这些子任务可以是一个saga或者effect),并通过while、if...
注意：reducer 和 saga 如果监听到相同的 action，他们两个都会执行，为了避免状态流转混乱，应避免在 reducer 和 saga 中监听相同的 action。2. 实践 2.1 takeEvery 和 takeLatest export function * userInfo () { yield takeEvery('FETCH_USER_INFO', fetchUserInfo) // 可以监听多个 action yield take...
redux-saga框架核心API 一、Saga 辅助函数 redux-saga提供了一些辅助函数,用来在一些特定的action 被发起到Store时派生任务,下面我先来讲解两个辅助函数:takeEvery和takeLatest takeEvery 例如:每次点击 Fetch 按钮时,我们发起一个 FETCH_REQUESTED 的 action。 我们想通过启动一个任务从服务器获取一些数据,来处理这个...