redux-saga에서 테이크를 사용하는 방법

이번에는 take in redux-saga 사용법과 take in redux-saga 사용 시 어떤 주의사항이 있는지 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

내가 오랫동안 연구한 API 사용법을 가져오세요.

redux-saga의 effect에서 take API 사용법은 주로 call, put, select에 사용되지만 take는 잘 사용하지 않습니다. 어쨌든 redux-saga에서 작성한 것이므로 사용법이 있을 것입니다. 37 21에 관계없이 먼저 사용법을 배우십시오.

소개를 먼저 살펴보세요.

take

take의 성능은 takeEvery와 동일합니다. 액션을 모니터링하지만, takeEvery와 달리 액션이 트리거될 때마다 응답하지 않고, 실행 시퀀스에서 take 문이 실행될 때만 액션에 응답합니다.

작업을 기다리기 위해 생성기의 take 문을 사용하면 생성기가 차단되고 작업이 배포될 때까지 기다린 다음 실행을 계속합니다.

takeEvery는 각 작업을 듣고 처리 function을 실행합니다. takeEvery는 응답 시기와 방법을 제어할 수 없습니다.

그러나 take는 생성기 함수에서 언제 작업에 응답할지, 작업이 트리거된 후에 무엇을 할지 결정할 수 있습니다.

가장 큰 차이점: take는 실행 흐름에 도달할 때만 해당 작업에 응답하는 반면, takeEvery는 등록된 작업에 응답합니다.

위의 코드:

effects: {
 * takeDemo1({payload}, {put, call, take}) {
 },
 * takeInputChange({payload}, {put, call, take,takeEvery,takeLatest}) {
  // yield call(delay,1000);
  console.log(takeEvery);
  // for (let i = 0; i < 3; i++) {
   const action = yield take(&#39;takeBlur&#39;});
   console.log(action, &#39;action&#39;);
   console.log(payload.value);
  // }
 },
 * takeBlur() {
  console.log(323)
 },
}

changeHandle(e){
 this.props.dispatch({type:'takeInputChange',payload:{value:e.target.value}})
}
blur(){
 this.props.dispatch({type:'takeBlur'})
}
render() {
 return (
  <p style={{position: &#39;relative&#39;}}>
   <Input onChange={this.changeHandle.bind(this)} onBlur={this.blur.bind(this)}/> 
  </p>
  )
}

페이지에 입력이 있으며 두 가지 메소드에 바인딩되어 있습니다. 첫 번째는 onchange 메소드이고 다른 하나는 onBlur 메소드입니다.

입력 값이 변경되면 this.props.dispatch를 통해 ({ type:'takeInputChange'}) 이 함수가 호출되지만 take 메서드를 만나서 실행을 계속할 수 없습니다(일시 중지). 여기서 take를 takeEvery로 바꾸면 매우 달라지며 함수가 계속됩니다. 즉, 다음 두 개의 콘솔이 실행되고

그리고 takeEvery 실행 메서드가 해당 콜백에 배치됩니다. 아래 코드를 참조하세요

yield takeEvery('takeBlur',()=>{console.log(payload.value)});

이 함수는 입력이 변경될 때마다 트리거된다는 점을 강조해야 합니다. 변경될 때마다 콘솔이 콘솔에 값을 인쇄하는 것을 볼 수 있습니다.

다음으로 입력이 포커스를 잃으면 onBlur 메서드가 실행되고 this.props.dispatch({type:'takeBlur '});가 호출됩니다.

takeInputChange가 takeBlur 작업을 모니터링했기 때문에 실행해야 할 콘텐츠를 계속 실행합니다.

어차피 이 테이크는 오랫동안 연구되었습니다. 이것이 언제 도움이 될지 모르겠습니다.

이 기사의 사례를 읽으신 후 방법을 익히셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

WeChat 웹 측에서 백포스 새로 고침을 구현하는 방법

쿠키 만료, 자동 업데이트 및 자동 획득 설정

React BootStrap 프레임워크 사용 방법

위 내용은 redux-saga에서 테이크를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!