React Redux app - a comprehensive initiative composition fulfills a final promise before others are fulfilled

Question

I am working on an application that needs to manage a lot of data. During the initialization process, several api calls should be made when the user sees the download bar.

Here is my init action:

export function init(key) {

  return (dispatch, getState) => {

    // start init
    dispatch(initStart());

    setTimeout(() => {
      dispatch(initProcess(10));
    }, 0)


    return Promise.all([

      // load users
      dispatch(loadUsers(key)).then(() => {
        dispatch(initProcess(30));
      }),

      // load other stuff
      // ...

      // load articles
      dispatch(loadArticles(key)).then(() => {
        dispatch(initProcess(60));
      }),

    // should be executed after all actions/reducers are done
    ]).then(() => {
      setTimeout(() => {
        dispatch(initFinish());
      }, 700);
    });
  }
}

So far this works fine, but there will be 20 to 50 thousand articles. The backend needs to do some merging to get the data together, so I'm sure that I will get the server timeout if I try to get it in one piece.

The idea is to get the total number first, and then get articles in 1k pieces per cycle. But this will not work as I need. I get initFinishsent after the articles are counted, but not after they are received.

loadArticles:

export function loadArticles(key) {
  return (dispatch, getState) => {

    // check local db first

    // get total number
    return dispatch(countArticles(key))
    .then(result => {
      Promise.all([
        // No idea how to put the loop in here :(
        dispatch(fetchArticles(key, 1000)),
      ])
    });
 }

}

, . . dispatch(countArticles(key)) fetchArticles.

? .

---

coutArticles fetchArticles

function countArticles(key) {
  return {
    [CALL_API]: {
      types: [ COUNT_ARTICLES_REQUEST, COUNT_ARTICLES_SUCCESS, COUNT_ARTICLES_FAILURE ],
      endpoint: `articles`,
      schema: Schemas.ARTICLE_COUNTER
    }
  }
}
function fetchArticles(key, take, skip) {
  return {
    [CALL_API]: {
      types: [ FETCH_ARTICLES_REQUEST, FETCH_ARTICLES_SUCCESS, FETCH_ARTICLES_FAILURE ],
      endpoint: `articles/${take}/${skip}`,
      schema: Schemas.ARTICLE_ARRAY
    }
  }
}

- es

---

2. EDIT

// get total number
return dispatch(countArticles(key))
.then(result => {
  Promise.all([
    // No idea how to put the loop in here :(
    dispatch(fetchArticles(key, 1000)),
  ])
});

// get total number
dispatch(countArticles(key))
.then(result => {
  return Promise.all([
    // No idea how to put the loop in here :(
    dispatch(fetchArticles(key, 1000)),
  ])
});

Uncaught TypeError: Cannot read property 'then' of undefined dispatch(loadArticles(key)).

---

3. EDIT

^^

init, () , :

:

export function init(key) {

  return (dispatch, getState) => {

    countArticles(key).then(result => {
      console.log(result);
    });

  }
}

:

Uncaught TypeError: countArticles(...).then is not a function

Answer 1

; Promise, .

,

countArticles(key).then(result => {
    dispatch( {
        type:  RECEIVED_NUM_ARTICLES,
        value: result
    })
    Promise.all([...Array(Math.floor(result/1000))].map(_ => 
         fetchArticles(key,1000).then(res => dispatch( {
            type:  RECEIVED_1000_ARTICLES,
            value: res
         })
    )).then( _ => dispatch({
            type:  RECEIVED_EVERYTHING
            value: 'whatever'
         })
    )
)

( )

: fetch dispatch , / ..

, modulo

, , , 1000 , , ,