How to use the electron.ipcRenderer.on function in electron

const persist = new PersistStore()

const store = Restore.create(state(), actions)
store.events = new EventEmitter()

rpc('getSigners', (err, signers) => {
  if (err) return store.signersError(err)
  store.updateSigners(signers)
})

rpc('launchStatus', (err, status) => {
  if (err) return console.log(err) // launchStatusError
  store.setLaunch(status)
})

ipcRenderer.on('main:addSigner', (e, signer) => store.addSigner(signer))
ipcRenderer.on('main:removeSigner', (e, signer) => store.removeSigner(signer))
ipcRenderer.on('main:updateSigner', (e, signer) => store.updateSigner(signer))
ipcRenderer.on('main:setSigner', (e, signer) => store.setSigner(signer))

// Replace events with observers
store.events.on('approveRequest', (id, req) => {
  store.requestPending(id)
  provider.approveRequest(req, (err, res) => {
    if (err) return store.requestError(id, err)
    store.requestSuccess(id, res)
  })
})

// Store Observers
store.observer(() => {
  if (store('panel.show')) {

if (value.length === 0) {
                return undefined;
            }

            const ch = value[0];
            const num = value.charCodeAt(0);
            if (ch === 'v'  // visual mode
                || ch === 'V' // visual line mode
                || num === 22 // visual block mode
                ) {
                client.input('"+x');
            }
        });
    });

    ipc.on('nyaovim:paste', () => {
        // get current vim mode
        client.eval('mode()').then((value: string) => {
            if (value.length === 0) {
                return undefined;
            }

            let command: string;

            const ch = value[0];
            const code = value.charCodeAt(0);
            if (ch === 'v') {
                // visual mode
                // deleting the highlighted area
                // to prevent vim from copying the area to the pasteboard
                command = '"_d"+P';
            } else if (ch === 'V') {

}
    });

    ipcRenderer.on('webpack-stats-results-json', (event, res) => {
      ipcRenderer.send('run-parcel');
      console.log('@webpack');
      this.props.retrieveWebpackStats(res);
    });

    ipcRenderer.on('parcel-stats-results-json', (event, res) => {
      ipcRenderer.send('run-rollup');
      console.log('@parcel');

      this.props.retrieveParcelStats(res);
    });
    ipcRenderer.on('rollup-stats-results-json', (event, res) => {
      console.log('build finished');
      this.setState({ dirname: res });
      this.props.retrieveRollupStats();
    });
    ipcRenderer.on('error', () => {
      this.setState({ mainPageMessage: 'An issue occurred while bundling your project.' });
    });

  
  }
  renderLoadingModal() {

} else {
  render(
    
      {component}
    ,
    document.getElementById('root')
  )
}

ipcRenderer.on('set.projectName', (event, data) => {
  if (!projectName && !notMainMarked) {
    projectName = data.projectName
  }
})

ipcRenderer.on('goto.main', () => {
  refreshSideBar(projectName, store)
  hashHistory.push(`/repo/${projectName}/history`)
})

ipcRenderer.on('refresh.sidebar', () => {
  refreshSideBar(projectName, store)
})

});

ipc.on('new-list', () => {
  nav.click('.baseAdd-icon');
});

ipc.on('delete-list', () => {
  nav.click('.toolbarButton.more');
  nav.click('.popoverMenuItem-destructive');
});

ipc.on('rename-list', () => {
  nav.click('.listTitle');
});

ipc.on('hide-todo', () => {
  nav.click('.toolbarButton.more');
  nav.click('.checkbox-completed-18');
});

ipc.on('new-todo', () => {
  nav.click('#main > div.main-background > div.baseAdd.addTask > button');
});

ipc.on('rename-todo', () => {
  nav.click('.taskItem.selected.active');
  nav.click('.editableContent-editButton');
});

ipc.on('delete-todo', () => {
  nav.click('.taskItem.selected');
  nav.click('.detailFooter-trash');

const values = this.props.values
      let popup = details ? (this.state.popup || popups[id] || values.default_popup) : (popups[id] || values.default_popup)
      if(popup) popup = popup.startsWith('chrome-extension://') ? popup : `chrome-extension://${id}/${popup}`
      const text = details ? (this.state.text || texts[id]) : texts[id]
      const title = details ? (this.state.title || titles[id] || values.name) : (titles[id] || values.name)
      const color = details ? (this.state.color || bgs[id]) : bgs[id]
      ipc.send(`chrome-browser-action-get-info-${this.props.id}-reply_${key}`, {id: this.props.tab.wvId, popup, text, title, color})
    }
    ipc.on(`chrome-browser-action-get-info-${this.props.id}`,this.getInfo)


    this.enable = (e, tabId, enable) => {
      if(tabId != this.props.tab.wvId) return
      this.setState({enable})
    }
    ipc.on(`chrome-browser-action-enable-${this.props.id}`,this.enable)


    this.otherOpen = (e, panelKey, tabKey) => {
      if(this.props.k == panelKey && this.props.tab.key == tabKey) return
      this.close()
    }
    ipc.on('set-overlap-component-open', this.otherOpen)

    this.closeBrowserAction = e => this.close()
    ipc.on('close-browser-action',this.closeBrowserAction)

    this.tokenStartLoading = PubSub.subscribe(`on-load-start_${this.props.tab.key}`,(msg,url)=>{
      const newState = []
      let needUpdate = false
      for(let ele of ['icon','title','text','color','popup']){
        if(this.state[ele]){

onCoreInfoUpdated: listener => {
      if (typeof listener !== 'function') {
        throw new Error(
          'Expected `listener` to be `function` type, found: ' + typeof listener
        );
      }
      ipcRenderer.on('core-info-updated', (event, coreInfo) =>
        listener(coreInfo)
      );
    },
  },

promptUser = 0;
      return;
    }
    if (res === 0) $scope.save();
    ipcRenderer.send('close');
  });

  ipcRenderer.on('download-complete', (channel, type) => {
    $timeout(() => $scope.inProgress[type] = false, 0);
    new Notification(appName, {
      body: `Finished downloading icons: ${type}`,
      icon: icon
    });
  });

  ipcRenderer.on('set-bookmark-icon', (channel, fileName) => {
    $timeout(() => {
      $scope.selectedIcon = fileName;
    }, 0);
  });

  ipcRenderer.on('bookmark-validation', (channel, result) => {
    $timeout(() => {
      $scope.inProgress.testConfig = false;
      $scope.testSuccessful = result === true;
      if (!$scope.testSuccessful) 
        alert(`Bookmark Config Invalid:\n\n${result}`);
    }, 0);
  });
}]);

game.state.add('menu'       , States.Menu)
game.state.add('connect'    , States.Connect)
game.state.add('mode_vs'    , States.ModeVs)
game.state.add('mode_puzzle', States.ModePuzzle)
game.state.add('puzzle_menu', States.PuzzleMenu)
game.state.start('boot')

ipc.on('play-vs', (event, {seed,online,cpu}) => {
  game.state.start('mode_vs',true,false, {
    seed:   seed,
    online: online,
    cpu:    cpu
  })
})

ipc.on('replay-load', (event, {seed,inputs}) => {
  game.state.start('mode_vs',true,false, {
    seed:   seed,
    online: false,
    inputs: inputs,
    cpu: [false,false]
  })
})

ipc.on('network-connect', (event, data) => {
  game.state.start('connect',true,false,data)
})