redux-saga 解析 #

worker saga
//做所有的工作，如调用 API，进行异步请求，并且获得返回结果
watcher saga
//监听被 dispatch 的 actions，当接收到 action 或者知道其被触发时，调用 worker saga 执行任务
root saga
//立即启动 sagas 的唯一入口

window.addEventLister('xxx', fn);

// put：你就认为put就等于 dispatch就可以了；
import { take, put, fork, select } from 'redux-saga/effects';
import { actionTypes } from '../actions/saga';
import fetch from '../../services/api';
/**
 *  worker saga  作用函数：执行异步任务
 */
export function* fetchTypes() {
  try {
    const { Data } = yield call(fetch.topicType);
    yield put({ type: actionTypes.TYPE_SUCCESS, payload: Data });
  } catch (error) {
    yield put({ type: actionTypes.TYPE_ERROR, error });
  }
}
//watch saga  监听函数: 监听对应type的action，当被触发时执行worker saga
function* watchFetchTypes() {
  yield takeEvery(actionTypes.TYPE_REQUEST, fetchTypes);
}
export default [fork(watchFetchTypes)];

function* watchFetchTypes() {
  while (true) {
    yield take(actionTypes.TYPE_REQUEST);
    yield fork(fetchTypes);
  }
}

export function* fetchNewsType() {
  try {
    yield delay(9000);
    const { data } = yield call(fetch.newsType);
    yield put({ type: actionTypes.TYPE_SUCCESS, payload: data });
  } catch (error) {
    yield put({ type: actionTypes.TYPE_ERROR, error });
  }
}
export function* fetchNewsList(action) {
  console.log('would了');
  console.log(action);
  try {
    const { data } = yield call(fetch.newsList, action.id);
    yield put({ type: actionTypes.LIST_SUCCESS, payload: data });
  } catch (error) {
    yield put({ type: actionTypes.LIST_ERROR, error });
  }
}
function* watchFetchTypes() {
  yield takeLatest(actionTypes.TYPE_REQUEST, fetchNewsType);
  // yield takeEvery(actionTypes.LIST_REQUEST, fetchNewsList);
  // yield takeLatest(actionTypes.TOPIC_REQUEST, fetchTopics);
}

const takeLatest = (patternOrChannel, saga, ...args) =>
  fork(function* () {
    let lastTask;
    while (true) {
      const action = yield take(patternOrChannel);
      if (lastTask) {
        yield cancel(lastTask); // cancel is no-op if the task has already terminated
      }
      lastTask = yield fork(saga, ...args.concat(action));
    }
  });

const action = yield take(patternOrChannel)

 lastTask = yield fork(saga, ...args.concat(action))

function* watchFetchData() {
  while (true) {
    // 监听一个type为 'FETCH_REQUESTED' 的action的执行，直到等到这个Action被触发，才会接着执行下面的 		yield fork(fetchData)  语句
    yield take('FETCH_REQUESTED');
    yield fork(fetchData);
  }
}

//收三个盘子再洗
function* 餐盘收集处() {
	while(true) {
        let one = yield take('脏盘子'）
        let two = yield take('脏盘子'）
        let three = yield take('脏盘子'）
        let 一堆盘子 = yield 洗盘子(one,two,three）
        yield put（{type:'放盘子'，盘子： 一堆盘子}）
	}
}

//收一个洗一个
function* 餐盘收集处() {
	while(true) {
        let one = yield take('脏盘子'）
        let 一个盘子 = yield 洗盘子(one）
        yield put（{type:'放盘子'，盘子： 一个盘子}）
	}
}

export function* fetchTypes() {
  try {
    const { Data } = yield fetch.topicType();
    yield put({ type: actionTypes.TYPESUCCESS, payload: Data });
  } catch (err) {
    yield put({ type: actionTypes.ERROR });
  }
}

export const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

export function* removeItem() {
  try {
    // 这里call 函数就调用了 delay 函数，delay 函数为一个返回promise 的函数
    return yield call(delay, 500);
  } catch (err) {
    yield put({ type: actionTypes.ERROR });
  }
}

import { takeEvery } from 'redux-saga/effects';
import Api from './path/to/api';

function* fetchProducts() {
  const products = yield Api.fetch('/products');
  console.log(products);
}

function* watchFetchProducts() {
  yield takeEvery('PRODUCTS_REQUESTED', fetchProducts);
}

import { call } from 'redux-saga/effects';

function* fetchProducts() {
  const products = yield call(Api.fetch, '/products');
  // ...
}

// Effect -> call the function Api.fetch with `./products` as argument
{
  CALL: {
    fn: Api.fetch,
    args: ['./products']
  }
}

import { call } from 'redux-saga/effects';
import Api from '...';

const iterator = fetchProducts();

// expects a call instruction
assert.deepEqual(
  iterator.next().value,
  call(Api.fetch, '/products'),
  "fetchProducts should yield an Effect call(Api.fetch, './products')",
);

yield call([obj, obj.method], arg1, arg2, ...) // as if we did obj.method(arg1, arg2 ...)
yield apply(obj, obj.method, [arg1, arg2, ...])

import { fork } from 'redux-saga/effects';

export default function* rootSaga() {
  // 下面的四个 Generator 函数会一次执行，不会阻塞执行
  yield fork(addItemFlow);
  yield fork(removeItemFlow);
  yield fork(toggleItemFlow);
  yield fork(modifyItem);
}

export function* toggleItemFlow() {
  // 通过 select effect 来获取 全局 state上的 `getTodoList` 中的 list
  let tempList = yield select((state) => state.getTodoList.list);
}

import { all, call } from 'redux-saga/effects'
// correct, effects will get executed in parallel
const [users, repos]  = yield all([
  call(fetch, '/users'),
  call(fetch, '/repos')
])

import { race, take, put } from 'redux-saga/effects'

function* backgroundTask() {
  while (true) { ... }
}

function* watchStartBackgroundTask() {
  while (true) {
    yield take('START_BACKGROUND_TASK')
    yield race({
      task: call(backgroundTask),
      cancel: take('CANCEL_TASK')
    })
  }
}