等待多个 ipc 调用完成，然后继续使用电子/redux

Question

我正在使用 Electron、React 和 Redux 开发一个应用程序。在程序启动时，我在渲染进程和主进程之间进行了几次异步 ipc 调用，并将结果保存在存储中。

// in the main app component
componentWillMount() {
    const { store } = this.context;
    store.dispatch(fetchOptions());
    store.dispatch(fetchRequirements());
    store.dispatch(fetchStats());
    /* miracle function */
},

// actions.js
export function fetchOptions() {
    return dispatch => {
        dispatch(requestOptions());
        ipcRenderer.on('sendOptions', function(event, arg) {
            dispatch(receiveOptions(arg));
        });
        ipcRenderer.send('requestOptions', '');
    };
}
// others accordingly

receiveOptions(arg)、receiveRequirements(arg) 和receiveStats(arg) 是动作创建者，最后reducer 会将响应保存在商店中。

在store.dispatch(fetchStats()) 之后，我想直接调度另一个操作，以根据加载到存储中的值进行一些计算。但是，此操作通常会在来自 ipc 的响应到达之前发送。

我发现this discussion 有类似的问题，但他们使用fetch 而不是ipc 消息进行api 调用，我不知道如何将他们的想法应用于我的问题。

所以这是我的问题：如何让程序在继续之前等待所有渠道的响应？

编辑：当我在 ipc 调用后为调度设置一个长度为 0 的时间时，它至少可以立即响应，但是当响应需要更长的时间时它当然没有帮助。

store.dispatch(fetchOptions());
store.dispatch(fetchRequirements());
store.dispatch(fetchStats());

setTimeout(function() {
    store.dispatch(calculateThis());
    store.dispatch(calculateThat());
}, 0);

Answer 1

一个使用Promises的例子

假设

我不熟悉您的icpRenderer 的工作方式，或者调度完成时的确切情况。我将假设调用dispatch(receiveOptions(arg))返回后完成调度

    ipcRenderer.on('sendOptions', function(event, arg) {
        dispatch(receiveOptions(arg));
    });

如果 dispatch() 是异步的，这将不起作用（除非你等到 dispatch() 完成后才解决承诺）。

如果我的假设是正确的

你应该能够return像这样收到“承诺”（并解决它）

    // actions.js
    export function fetchOptions(promise) {
        return dispatch => {
            dispatch(requestOptions());
            ipcRenderer.on('sendOptions', function(event, arg) {
                dispatch(receiveOptions(arg));
                if (promise) promise.resolve(); // Resolve the promise
            });
            ipcRenderer.send('requestOptions', '');
        }
    }
    // return Promises others accordingly

（请注意，您可以在不传递“promise”的情况下调用 fetchOptions，因为我们仅在存在 promise 时才调用 promise.resolve()。因此，这不应使您现有的代码复杂化。）

为了等待承诺解决，你可以这样做

    // in the main app component
    componentWillMount() {
        const { store } = this.context;
        const promises = [
            new Promise((resolve, reject) =>
                store.dispatch(fetchOptions({resolve, reject}))),
            new Promise((resolve, reject) =>
                store.dispatch(fetchRequirements({resolve, reject}))),
            new Promise((resolve, reject) =>
                store.dispatch(fetchStats({resolve, reject})))
        ];
        Promise.all(promises).then(() =>
            // Dispatch another action after the first three dispatches are completed.
        );
    },

代码不是很干净，但希望它至少可以工作。