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

이 글은 주로 redux-saga의 take 사용에 대한 자세한 설명을 소개하고 있습니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

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

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

소개를 먼저 살펴보세요.

take

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

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

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

하지만 테이크는 다릅니다. 생성기 함수에서 작업에 응답할 시기와 작업이 트리거된 후 수행할 작업을 결정할 수 있습니다.

가장 큰 차이점: 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 메서드가 발생하므로 실행을 계속할 수 없습니다(일시 중지). 즉, 다음 두 콘솔이 실행됩니다.

및 takeEvery 실행 메소드가 콜백에 배치됩니다. 아래 코드를 살펴보세요.

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

강조해야 할 것은 입력이 변경될 때마다 이 함수가 실행되므로 변경될 때마다 콘솔에 값이 인쇄되는 것을 볼 수 있습니다.

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

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

이 테이크에는 어차피 오랫동안 연구했는데 이게 언제 도움이 될지 모르겠어요.

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