4

我正在开发一个必须管理大量数据的应用程序。在初始化过程中，当用户看到加载条时，必须执行几个 api 调用。

这是我的初始化操作：

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);
    });
  }
}

到目前为止，它运行良好，但会有 20k 到 50k 篇文章。后端必须执行一些连接才能将数据放在一起，所以如果我尝试将它们整合在一起，我确信我会得到服务器超时。

这个想法是先获取总数，然后循环获取 1k 篇文章。但它不会按我需要的方式工作。我是initFinish在文章数完之后才被派去的，但不是在它们被取走之后。

这是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. 编辑

如果我改变

// 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. 编辑

几天后我还在战斗^^

这是简化的 init 函数，它应该（仅）获取计数结果，然后获取文章：

但现在我已经在这里失败了：

export function init(key) {

  return (dispatch, getState) => {

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

  }
}

输出：

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

1 回答 1

1

我也遇到了链接调度的问题；它应该返回 aPromise但我无法让它工作。

所以我会这样改变逻辑

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是结果，然后链接另一个 fetch/dispatch 序列，等等......

循环需要返工以获取模数

这种方法的优点是您可以在拥有文章时使用文章数量更新 UI，然后在每获取 1000 篇文章时提供更新，最后在完成时通知

于 2016-02-17T17:08:05.563 回答