reactjs - 如何告诉我的mainWindow在另一个窗口关闭后重新加载？

Question

我正在开发需要Twitch OAuth的应用程序。在我的主窗口中，我有一个按钮，然后打开另一个BrowserWindow并使用以下命令打开登录Twitch所需的URL:
Login.tsx

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Redirect } from 'react-router-dom';
import Spinner from 'react-bootstrap/Spinner';
import routes from '../constants/routes.json';
import styles from './Login.css';
import Config from '../lib/Config';
import {
  enableLoading,
  isLoading
} from '../features/login/loginSlice';

export default function Login() {
  const dispatch = useDispatch();
  const loading = useSelector(isLoading);
  const config = new Config();
  if(config.getAccessToken()) {
    return <Redirect to={routes.COUNTER}/>;
  }
  return (
    <div>
      {loading ? <div>Waiting for Twitch authentication...<div><Spinner animation="border"/></div></div> : <button onClick={() => dispatch(enableLoading())} className={styles.loginButton}><i className='fab fa-lg fa-twitch'/>CONNECT WITH TWITCH</button>}
    </div>
  );
}

loginSlice.ts (所有Redux内容)

import { createSlice } from '@reduxjs/toolkit';
import { RootState } from '../../store';
const electron = require('electron');
import { BrowserWindow } from 'electron';
const BW = electron.remote.BrowserWindow;
import Config from '../../lib/Config';

const config = new Config();

let authWindow: BrowserWindow | null = null;

const loginSlice = createSlice({
  name: 'login',
  initialState: { loading: false },
  reducers: {
    enableLoading: (state) => {
      state.loading = true;
      const scopes = ['user:read:email', 'moderation:read'];
      const clientID = 'wq852hkxpa4tpfu1anqr5h5gvtncwa';
      const scope = scopes.join('+');
      const url = `https://id.twitch.tv/oauth2/authorize?response_type=token&client_id=${clientID}&redirect_uri=http://localhost/callback&scope=${scope}`;
      authWindow = new BW({
        show: true,
        width: 1024,
        height: 728,
        webPreferences: {
          nodeIntegration: true,
        },
      });
      authWindow.loadURL(url);
      authWindow.webContents.on('did-start-navigation', (_event, url) => {
        processCallbackUrl(url);
      });

      authWindow.webContents.on('will-redirect', (_event, url) => {
        processCallbackUrl(url);
      });
      authWindow.on('closed', () => {
        authWindow?.destroy();
      });
    },
    disableLoading: (state) => {
      state.loading = false;
    },
  },
});

function processCallbackUrl(url: string) {
  var token = /#access_token=(\w+)/.exec(url) || null;
  if (token) {
    config.setAccessToken(token[1]);
    authWindow?.destroy();
    //HERE IS WHERE I NEED TO TELL MY PAGE TO REDIRECT OR RELOAD
  }
}

export const { enableLoading, disableLoading } = loginSlice.actions;

export default loginSlice.reducer;

export const isLoading = (state: RootState) => state.login.loading;

所有这些都很好。除了现在，我需要loginSlice.ts以某种方式告诉主窗口(已加载Login.tsx)重定向到其他地方。
有什么办法可以做到这一点？

Answer 1

  const ipcRenderer = electron.remote.ipcRenderer;

  authWindow.on('closed', () => {
    authWindow?.destroy();
    ipcRenderer.send('reload');
  });

在创建mainWindow的主要过程中

  ipcMain.on('reload', (e) => {
    mainWindow.webContents.executeJavaScript("window.reload()");
  })