Question 178719 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – ElectronJS:Is their any way to send values from renderer.js to main.js and based on certain operation return value to renderer.js

I am looking to send data from renderer.js to main.js and after certain operation return some values back to renderer.js.

 const handleFilter = async () => {         
            const response=await window.electronAPI.fetchIssueAnalyses(data);
            console.log(response);
        };

const createWindow = () => {
  //Connect to MYSQL server
  connection.connect((err) => {
    if (err) {
      console.error('Error connecting to MySQL database: ', err);
    } else {
      console.log('Connected to MySQL database!');
    }
  });
  ipcMain.on('set-testing', (event, data) => {
    console.log(data)
  })
  ipcMain.on('fetch-issue-analyses', (event, data) => {
    const { sdate, edate, cell } = data;
    --- some operation -----
return value;
  
    });
  });
Tags:

2

Answers


  1. 0

    you can use the Electron’s inter-process communication (IPC) mechanism.

    in renderer.js

    
const handleFilter = () => {
  const data = {
    sdate: '2023-01-01',
    edate: '2023-01-31',
    cell: 'A1'
  };

  ipcRenderer.send('fetch-issue-analyses', data);
};

ipcRenderer.on('issue-analyses-response', (event, response) => {
  console.log(response);
});

    In main.js

    const { app, BrowserWindow, ipcMain } = require('electron');
const mysql = require('mysql');

let mainWindow;
const connection = mysql.createConnection({
  // MySQL connection configuration
});

function createWindow() {
  mainWindow = new BrowserWindow({
    // Window options
  });

  // ...window setup code...

  connection.connect((err) => {
    if (err) {
      console.error('Error connecting to MySQL database: ', err);
    } else {
      console.log('Connected to MySQL database!');
    }
  });

  ipcMain.on('fetch-issue-analyses', (event, data) => {
    const { sdate, edate, cell } = data;

    // Perform your operations with the data and retrieve the result
    // Replace the following placeholder code with your actual implementation
    const result = {
      // Your result data
    };

    event.reply('issue-analyses-response', result);
  });
}

// ...app event handlers...

app.whenReady().then(createWindow);

// ...other app code...
    Login or Signup to reply.
  2. 0

    You can use ipcRenderer.invoke() and ipcMain.handle() for exactly that:

    renderer:

    const response = await ipcRender.invoke("fetch-issue-analyses", data);

    main:

    ipcMain.handle('fetch-issue-analyses', async (event, data) => {
  const { sdate, edate, cell } = data;
  --- some operation ----- // await can be used
  return value;
});

    if you are using a preload script for higher security, you may wanna follow the official docs example:

    https://www.electronjs.org/docs/latest/tutorial/ipc#1-listen-for-events-with-ipcmainhandle

    https://www.electronjs.org/docs/latest/tutorial/tutorial-preload#communicating-between-processes

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search