react-saga 浅析

2022-01-19 17:33:38 作者：互联网

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