Я хочу уведомить об успехе следующих задач один за другим. Как мне это сделать в электронном режиме?

Question

У меня есть следующие задачи, которые инициируются при одном взаимодействии: нажатие кнопки.

Как запустить первую задачу в конвейере, а затем уведомить главное окно о завершении?

В данный момент я делаю:

actions / index.js

import { INCREMENT_SERVER_PIPELINE } from "./types";
import { ipcRenderer } from 'electron';
import { SERVER_SETUP, STAGE_COMPLETE } from '../constants';

export const setupServer = (serverName, artifactName) => dispatch => {
ipcRenderer.send(SERVER_SETUP, serverName, artifactName);

ipcRenderer.on(STAGE_COMPLETE, (event) => {
 dispatch({ type: INCREMENT_SERVER_PIPELINE });
});
};

И в моем главном файле index.js, расположенном в корневом каталоге проекта, где я инициализирую свое mainWindow, у меня есть содержимое:

ipcMain.on(SERVER_SETUP, (event, serverName, artifactName) => {
  shellcmd.cd(APP_PATH + SERVER_DIRECTORY);
  shellcmd.mkdir('-p', serverName);
  mainWindow.webContents.send(STAGE_COMPLETE);

  shellcmd.cd(serverName);
  shellcmd.config.execPath = shellcmd.which('node');
  shellcmd.exec('npm init -y');
  mainWindow.webContents.send(STAGE_COMPLETE);

  shellcmd.config.execPath = shellcmd.which('node');
  shellcmd.exec(INSTALL_JSON_SERVER);
  mainWindow.webContents.send(STAGE_COMPLETE);

  shellcmd.touch('db.json');
  shellcmd.echo(dbStructureGenerator(artifactName)).to('db.json');
  mainWindow.webContents.send(STAGE_COMPLETE);

  shellcmd.sed('-i', '\"test\".*', `\"db\": \"json-server -w db.json --port ${port}\"`, 
  'package.json');

  shellcmd.config.execPath = shellcmd.which('node');
  const child = spawn('npm', ['run', 'db']);

  mainWindow.webContents.send(STAGE_COMPLETE);

  shell.openExternal(`http://localhost:${port}`);
  port++;
});

Ясно, что в конце каждого этапа я хочу вызвать mainWindow.webContents.send (STAGE_COMPLETE);и я получаю это в файле действий так:

ipcRenderer.on(STAGE_COMPLETE, (event) => {
 dispatch({ type: INCREMENT_SERVER_PIPELINE });
});

Можно ожидать, что диспетчер должен изменить состояние в избыточном. Состояние просто является счетчиком вроде:

const INITIAL_STATE = {
  current: 0
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
     case INCREMENT_SERVER_PIPELINE:
        return { current: state.current + 1 };
     case RESET_PIPELINE:
        return INITIAL_STATE;
     default:
        return state;
 }
}

Теперь сам компонент имеет вид antd https://ant.design/components/steps/ и использует реквизит 'current' типа номер, как здесь https://ant.design/components/steps/#Steps.

Моя проблема в том, что когда я нажимаю на кнопку, экран останавливается до тех пор, пока все шаги в конвейере не будут завершены. Я хотел бы уведомить каждый шаг и его завершение на основе состояния редуктора, которое я показал выше.

Что я здесь не так понял?