Question

我正在使用React和Redux构建工具。我正在使用whatwg-fetch进行服务器端调用并获取一些数据。我有一个reducer，它会在成功获取数据后在回调中创建它的存储。这是我的代码：

import {createStore} from 'redux';
import 'whatwg-fetch';

let notificationCardList = [],
    initialState,
    store;

const fetchData = () => {
  fetch('http://localhost:6767/file/data.json')
    .then((response) => response.json())
    .then((responseData) => {
      notificationCardList = Object.keys(responseData).map(key => responseData[key]);
    })
    .then(initializeReducer);
}

const initializeReducer = () => {
  initialState = {
    notifCardsToBeDisplayed: notificationCardList,
    notifCardToBeDisplayed: null
  };

  function manipulateNotificationCards (state = initialState, action) {
    switch (action.type) {
      case 'OPEN_CARD':
        return Object.assign(state, {
          notifCardsToBeDisplayed: null,
          notifCardToBeDisplayed: action.card,
          notifCardsContainerPreviousState: action.notifCardsContainerCurrentState
        });
      case 'DISPLAY_CARD_LIST':
        return Object.assign(state, {
          notifCardsToBeDisplayed: action.cards,
          notifCardToBeDisplayed: null
        });
      default:
        return state;
    }
  }

  store = createStore(manipulateNotificationCards);
}

fetchData();  

export {store, notificationCardList};

但由于存储是作为回调的一部分创建的，由于异步行为，导出语句可能在createStore（）语句之前执行，因此我实际上是导出了一个未定义的'store'。我还想过将export语句放在回调中，但是再次，export语句只能在顶层。我也尝试使用setTimeout（），但这也不起作用。有什么办法可以在创建之后导出'store'吗？

Answer 1

处理异步初始化的常用方案是使用模块构造函数来获取所需的导出值，并且该模块构造函数返回promise或进行回调，异步导出值仅可通过该机制获得。这是因为异步操作需要不确定的时间，因此调用者可以可靠地使用它的唯一方法是等待它通过某种承诺或回调可用。

缓存的承诺是一种非常干净的方式。模块初始化存储将使用所需的异步值解析的promise。模块方法获取promise，然后调用者在promise上使用.then()。如果模块尚未完成获取异步值，则在值准备好之前，promise将不会调用.then()处理程序。如果该值已经可用，则将立即调用.then()处理程序。在任何一种情况下，调用者只需获取promise，添加.then()处理程序，然后对.then()回调中的值进行操作。

这些方法的一些示例：How to async require in nodejs

有什么办法可以执行一个延迟的JavaScript导出语句吗？

1 个答案: