首页 > 其他分享> 文章详细

react-saga 浅析

2022-01-19 17:33:38 阅读：216 来源： 互联网

标签：const saga effect yield react action redux 浅析

redux-saga 是一个用于管理redux应用异步操作代替 redux-thunk 的中间件

集中处理 redux 副作用问题。reducer负责处理action的更新，saga负责协调那些复杂或者异步的操作
使用 generator 函数执行异步
watch/worker（监听->执行）的工作形式

redux-saga 启动的任务可以在任何时候通过手动来取消，也可以把任务和其他的Effects放到 race 方法里以自动取消

createSagaMiddleware(...sagas:[])

createSagaMiddleware的作用是创建一个redux中间件，并将sagas与Redux store建立链接

effect

只要是被 yield 的值，都可以被称为 effect。例如 yield 1 中，数字 1 就是 effect。
所有的 effect 都是通过 yield 语法传递给 effect-runner 的，effect-runner 处理该 effect 并决定什么时候恢复生成器

put
作用和 redux 中的 dispatch 相同。

yield put({ type: 'CLICK_BTN' });

select
作用和 redux thunk 中的 getState 相同。

const id = yield select(state => state.id);

take
等待 redux dispatch 匹配某个 pattern 的 action 。

在这个例子中，先等待一个按钮点击的 action ，然后执行按钮点击的 saga：

while (true) {
  yield take('CLICK_BUTTON');
  yield fork(clickButtonSaga);
}

阻塞调用和无阻塞调用
redux-saga 可以用 fork 和 call 来调用子 saga ，其中 fork 是无阻塞型调用，call 是阻塞型调用。

fork
当接收到 BEGIN_COUNT 的 action，则开始倒数，而接收到 STOP_COUNT 的 action，则停止倒数。

function* count(number) {
  let currNum = number;

  while (currNum >= 0) {
    console.log(currNum--);
    yield delay(1000);
  }
}

function countSaga* () {
  while (true) {
    const { payload: number } = yield take(BEGIN_COUNT);
    const countTaskId = yield fork(count, number);

    yield take(STOP_TASK);
    yield cancel(countTaskId);
  }
}

call
有阻塞地调用 saga 或者返回 promise 的函数。

const project = yield call(fetch, { url: UrlMap.fetchProject });
const members = yield call(fetchMembers, project.id);

标签：const,saga,effect,yield,react,action,redux,浅析
来源： https://www.cnblogs.com/yujiaming890321/p/15823317.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react-saga 浅析

createSagaMiddleware(...sagas:[])

effect