redux-saga에서 take를 사용하는 방법에 대한 자세한 설명

이 글은 redux-saga에서의 take 사용법에 대한 자세한 설명을 위주로 소개하고 있으니 참고용으로 올려보겠습니다.

이 글에서는 redux-saga의 take 사용에 대한 자세한 설명을 소개하고, 자세한 내용은 다음과 같습니다.

오랜 시간 연구한 API 사용 방법을 가져옵니다.

방법. redux-saga에서 실제로 사용하고 있는 take API를 사용하고, use 대부분은 call, put, select인데 take는 거의 사용하지 않고, 어차피 redux-saga에서 작성했기 때문에 어디에 써야 할지 모르겠습니다. , 사용법이 있을 것입니다. 37 21에 상관없이 먼저 사용법을 알아보세요.

소개를 먼저 살펴보겠습니다.

take

take의 성능은 takeEvery와 동일하며, 특정 동작을 모니터링합니다. 하지만 takeEvery와 달리 액션이 실행될 때마다 트리거되지는 않습니다. 실행 시퀀스가 ​​take 문에 도달하면 해당 액션이 수행됩니다.

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

takeEvery는 각 동작을 듣고 처리 기능을 실행합니다. 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 작업을 모니터링했기 때문에 실행해야 할 콘텐츠를 계속 실행합니다.

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

위 내용은 나중에 여러분에게 도움이 되기를 바랍니다.

관련 기사:

Immutable과 React의 실무 기술을 자세히 설명합니다

easyui 날짜 및 시간 상자의 실제 문제, 즉 호환성 문제를 해결하는 방법(자세한 튜토리얼)

React에서 Native 사용 이미지 보기 구성 요소 구현

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