Understand take effect in redux saga work?

Question

I am building an app following by a course on youtube. but am not really understand the take effect work. I know the take effect pause until action is received.

src/sagas/statsSaga.js

function* watchStatsRequest() {
  while (true) {
    const { images } = yield take(IMAGES.LOAD_IMAGES_SUCCESS);
    for (let i = 0; i < images.length; i++) {
      yield fork(handleStatsRequest, images[i].id);
    }
  }
}

how yield take(IMAGES.LOAD_IMAGES_SUCCESS) can return an array of images? my full code: https://codesandbox.io/s/github/Kalipts/images-load-saga?file=/src/sagas/statsSaga.js

Answer 1

take waits for the IMAGES.LOAD_IMAGES_SUCCESS action to be dispatched and returns the action object once that action is dispatched. The action has the following structure (based on your sandbox)

 {
    type: IMAGES.LOAD_IMAGES_SUCCESS,
    images: images,
 }

This statement

const { images } = yield take(IMAGES.LOAD_IMAGES_SUCCESS);

will take the images property from the action object through destructuring and return a variable called images which contains the data of the images property of the action object

For simplicity, the code can be rewritten in this way

//wait for IMAGES.LOAD_IMAGES_SUCCESS to be dispatched
const action = yield take(IMAGES.LOAD_IMAGES_SUCCESS); 
//assign the images property from the resulting action object to a new variable
const images = action.images