For details about how to use take in redux-saga, redux-sagatake

For details about how to use take in redux-saga, redux-sagatake

This article describes how to use take in redux-saga and shares it with you as follows:

It brings you an API usage method that you have been studying for a long time.

In redux-saga, effect uses the call, put, and select APIs, but it usually does not have a chance to use them, I don't know where to use it. In any case, since it was written by redux-saga, it must have its usage. No matter how it works, I should learn how to use it first.

Let's take a look at the introduction:

Take

Like takeEvery, take listens to an action, but unlike takeEvery, it does not correspond to each action, the action is performed only when the take statement is executed sequentially.

When the take statement is used in genetator to wait for action, generator is blocked, wait for the action to be distributed, and then continue to execute.

TakeEvery only listens to each action and then executes the processing function. TakeEvery has no control over the corresponding action and action.

Take is different. In the generator function, we can determine when an action is triggered and what operations are performed after an action is triggered.

The biggest difference: take responds to the corresponding action only when the execution flow reaches, and takeEvery responds to the action once it is registered.

Code:

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('takeBlur'});   console.log(action, 'action');   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 (  <div style={{position: 'relative'}}>   <Input onChange={this.changeHandle.bind(this)} onBlur={this.blur.bind(this)}/>   </div>  )}

There is an input on the page and two methods are bound. The first method is the onchange method, and the other is the onBlur method,

When the input value changes, use this. props. dispatch ({type: 'takeinputchang'}). This function is called. However, because of the take method, you cannot continue to execute the function (paused ), if take is replaced with takeEvery, the function will continue to run, that is, the following two consoles will execute,

The takeEvery method is put in its callback. Let's look at the following code:

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

It should be emphasized that this function is triggered every time the input changes. Therefore, every time the input changes, the console prints the value in the console.

Next, if the input loses focus, the onBlur method will be executed. At this time, this. props. dispatch ({type: 'takeblur'}) will be called '});

Because the take in takeInputChange listens to the takeBlur action, it will continue to execute the content to be executed.

It takes a long time to study this take. I don't know when it will be useful.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.