其他分享
首页 > 其他分享> > react-saga 浅析

react-saga 浅析

作者:互联网

image

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

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