make yield put blocking in redux react

user_16134191 0
Viewed 259

I am working on a react app where I want to block the execution at yield put and only resumes after yield put is completed.How can I do it in redux react?

yield put(ActionCreator.setPageNumber(page_number + 1));

I have to implement a functionality of table scroller which increments page number every time and then makes the api call with the updated page number,the above yield put increments the page number but as yield put is non-blocking in nature,api call doesnt wait for the page increment and makes the api call with the non incremented page number.

Any leads would definitely help!

redux-saga react-redux redux reactjs javascript
1 Answers

You can add a separate saga watcher with take which is a blocking effect

export default function* TableScrollerSagaWatcher() {
  yield take('INCREMENT_PAGE_NUMBER_SUCCESS',tableScroller)
 /*
    assuming INCREMENT_PAGE_NUMBER_SUCCESS is the action type dispatched from the put call & tableScroller is the saga worker which would make the api call.*/
}

const tableScroller  = function*(){
    yield select() // select the page number from the store
    yield call() // make api call
 }
user_31043120
Related