我想一次又一次地通知以下任务成功。我该如何在电子反应中做到这一点?

时间:2019-10-16 14:41:08

标签: reactjs asynchronous redux electron

我有以下任务要在一次交互中启动:单击按钮。 enter image description here

如何触发管道中的第一个任务,然后将完成情况通知mainWindow?

我目前正在做的是:

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

人们可能希望调度应该更改redux中的状态。状态只是一种类似的计数器:

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/ 并使用类型为https://ant.design/components/steps/#Steps的类型的prop'current'。

我的问题是,当我单击按钮时,它冻结了屏幕,直到完成管道中的所有步骤。 我想根据上面显示的reducer状态,通知每个步骤及其完成。

我在这里出了什么问题?

0 个答案:

没有答案