redux-saga 원리 해석(코드 예시)

이 기사의 내용은 redux-saga 원리(코드 예제)의 해석에 관한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

저자는 최근 redux-saga를 사용하여 비동기 데이터 흐름을 처리하는 Ant Design Pro를 사용하여 일부 백엔드 프로젝트를 진행하고 있습니다. 이 기사에서는 redux-saga의 원리를 간단하게 해석하고 간단한 버전의 redux를 구현합니다. .-사가.

제너레이터 기능의 자동 프로세스 제어

redux-saga에서 saga는 제너레이터 기능으로 표현되는 일부 장기 작업을 의미합니다. 생성기 함수의 강력한 점은 실행을 수동으로 일시 중지하고 재개할 수 있으며 함수 본문 외부의 데이터와 상호 작용할 수 있다는 것입니다. 다음 예를 참조하세요.

function *gen() {
  const a = yield 'hello';
  console.log(a);
}
cont g = gen();
g.next(); // { value: 'hello', done: false }
setTimeout(() => g.next('hi'), 1000)  // 此时 a => 'hi'   一秒后打印‘hi'

생성기 함수가 다음 작업을 수행하는 시기는 전적으로 다음 작업에 달려 있음을 알 수 있습니다. 외부 스케줄링 타이밍 및 내부 실행 상태도 외부 입력에 의해 결정되므로 생성기 기능을 비동기 프로세스 제어에 편리하게 만듭니다. 예를 들어, 먼저 파일의 내용을 쿼리 매개변수로 읽은 다음 쿼리 인터페이스를 요청하고 반환된 내용을 인쇄합니다.

function getParams(file) {
  return new Promise(resolve => {
    fs.readFile(file, (err, data) => {
      resolve(data)
    })
  })
}
function getContent(params) {
  //  request返回promise
  return request(params)
}
function *gen() {
  const params = yield getParams('config.json');
  const content = yield getContent(params);
  console.log(content);
}

gen 함수의 실행을 수동으로 제어할 수 있습니다.

const g = gen();
g.next().value.then(params => {
  g.next(params).value.then(content => {
    g.next(content);
  })
})

위의 방법으로 다음과 같은 결과를 얻을 수 있습니다. 목적은 있지만 너무 번거롭습니다. 우리가 원하는 것은 생성기 함수가 자동으로 실행될 수 있다는 것입니다. 다음과 같이 간단한 자동 실행 함수를 작성할 수 있습니다.

function genRun(gen) {
  const g = gen();
  next();
  function next(err, pre) {
    let temp;
    (err === null) && (temp = g.next(pre));
    (err !== null) && (temp = g.throw(pre));

    if(!temp.done) {
      nextWithYieldType(temp.value, next);
    }
  }
}
function nextWithYieldType(value, next) {
  if(isPromise(value)) {
    value
      .then(success => next(null, success))
      .catch(error => next(error))
  } 
}
genRun(gen);

이때 생성기 함수는 실제로 자동으로 실행될 수 있습니다. 생성기의 내부 상태는 전적으로 nextWithYieldType에 의해 결정되는 것을 알 수 있습니다. Yield 유형에 따라 다른 처리 로직을 수행할 수 있습니다. nextWithYieldType决定的，我们可以根据yield的类型执行不同的处理逻辑。

Effect

事实上sagaMiddleware.run(saga)可以类似看做genRun(saga)，而saga是由一个个的effect组成的，那么effect是什么？redux-saga官网的解释：一个 effect 就是一个 Plain Object JavaScript 对象，包含一些将被 saga middleware 执行的指令。redux-saga提供了很多Effect创建器，如call、put、take等，已call为例：

function saga*() {
  const result = yield call(genPromise);
  console.log(result);
}

call(genPromise)

Effect

사실 sagaMiddleware.run(saga)은 genRun(saga)과 비슷하다고 볼 수 있는데, saga는 하나씩 이펙트로 구성되어 있는데 그 효과는 무엇일까요? redux-saga 공식 홈페이지 설명: one 효과는 Saga 미들웨어에서 사용할 일부 요소를 포함하는 일반 개체 JavaScript 개체입니다. 실행하라는 지시. redux-saga는 call, put, take 등과 같은 많은 Effect 생성자를 제공합니다. call은 예시로 사용됩니다.

{
  isEffect: true,
  type: 'CALL',
  fn: genPromise
}

call(genPromise)는 다음과 유사할 수 있는 효과를 생성합니다. 다음:

function nextWithYieldType(value, next) {
  ...
  if(isCallEffect(value)) {
    value.fn(). then(success => next(null, success)).catch(error => next(error))  
  } 
}

사실 효과는 의도만 나타낼 뿐이며 실제 동작은 위와 유사한 nextWithYieldType에 의해 완료됩니다. 예:

function *saga() {
  yield take('TEST');
  console.log('test...');
}

sagaMiddleware.run(test);

genPromise 함수에서 반환된 promise가 해결되면 결과가 인쇄됩니다. .

생산자와 소비자

아래 예를 관찰하세요

function nextWithYieldType(value, next) {
  ...
  // take('TEST')生成的effect简单的认为是  {isEffect: true, type: 'TAKE', name: 'TEST'}
  if(isTakeEffect(value)) {
    channel.take({pattern: value.name, cb: params => next(null, params)})  
  } 
}

saga는 take('TEST') 시 차단되며 saga는 디스패치({type: 'TEST'})가 실행된 후에만 계속 실행할 수 있습니다(참고: 이때의 디스패치 메소드는 sagaMiddleware로 패키징되어 있습니다. 이는 take가 disaptch의 소비를 기다리는 생산자라는 느낌을 주는 것 같습니다. 실제로 take는 Effect 생성기일 뿐이며 특정 처리 로직은 다음과 유사하게 nextWithYieldType에서 완료됩니다.

function channel() {
  /*
    task = {
      pattern,
      cb
    }
  */
  let _task = null;

  function take(task) {
    _task = task;
  }

  function put(pattern, args) {
    if(!_task) return;
    if(pattern == _task.pattern) _task.cb.call(null, args);
  }

  return {
    take,
    put
  }
}

channel은 작업 생성기에는 두 가지 방법이 있습니다: 작업을 생성하는 take, 작업을 소비하는 put: 🎜

const sagaMiddleware = store => {
  return next => action => {
    next(action);
    
    const { type, ...payload } = action;
    channel.put(type, payload);
  }
}

🎜 분명히 작업은 sagaMiddleware에서 다음과 유사하게 수행됩니다. 우리가 해야 할 일은 nextWithYieldType 함수를 지속적으로 개선하는 것입니다. Put, Fork 및 TakeEvery에 해당하는 로직을 완성한 후에는 이러한 기능에 대해 자세히 설명하지 않겠습니다. 🎜🎜🎜

위 내용은 redux-saga 원리 해석(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!