집 > 기사 > 웹 프론트엔드 > redux-saga에서 take를 사용하는 방법에 대한 자세한 설명

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

亚连원래의: 2018-06-04 10:33:532237검색

이 글은 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:&#39;takeInputChange&#39;,payload:{value:e.target.value}})
}
blur(){
 this.props.dispatch({type:&#39;takeBlur&#39;})
}
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(&#39;takeBlur&#39;,()=>{console.log(payload.value)});

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

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

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

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

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

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

관련 기사