関数をipcMainに渡してReact、Redux、Electronを使用して回避する方法

Question

アプリケーションで特定の時刻にローカルデータベースファイルからデータをロード/更新しようとしています。このファイルはメインプロセスからアクセスする必要がありますので、レンダラーからメインプロセスに送信し、必要なデータがメインプロセスから返されたらReduxのディスパッチを実行して状態を更新する必要があります。問題は、私のipcRenderer.on（）リスナーがディスパッチを適切に呼び出すためのコンテキストを持っていないことです。関数をメインプロセスに渡してレンダラに戻そうとしましたが、関数はipcRenderer.sendから取り除かれました。

メインプロセスからデータを受け取った後、自分の状態を正しく更新するにはどうすればよいですか？私のコードの孤立した塊の下に。

メインプロセス：

ipcMain.on('getSites', (event, args) => { 
    db.sites.find({}, (err, docs) => { 
    event.sender.send('getSitesSuccess', { data: docs, dispatch: args.dispatch }); 
    }); 
}); 

レンダラプロセス：

ipcRenderer.on('getSitesSuccess', (event, args) => { 
    args.dispatch(args.data); 
}); 

class SiteList extends Component { 
    componentWillMount() { 
    ipcRenderer.send('getSites', { 
     test: 'test', 
     dispatch: (data) => { this.props.dispatch(actions.change('sites', data)); } 
    }); 
    } 
} 

Answer 1

クラスインスタンス（componentDidMount）内にイベントリスナーを設定してください。また、インスタンスが破棄されると（componentWillUnmount）、イベントリスナーを適切に破棄してください。

class SiteList extends Component { 
    componentDidMount() { 
    ipcRenderer.on('getSitesSuccess', this.handleSitesSuccess); 
    } 

    componentWillUnmount() { 
    ipcRenderer.removeListener('getSitesSuccess', this.handleSitesSuccess); 
    } 

    handleSitesSuccess(event, args) { 
    console.log('data', args.data); 
    props.dispatch(actions.change('sites', args.data)); 
    } 
} 

あなたは、IPCコール（受信と送信の両方）の多くを行っている場合は、redux-electron-ipc（link）を見てみましょう。これにより、実際のコンポーネントからのipc呼び出しの配線ロジックが削除され、redux状態で直接作業することができます。

注：私はこのプラグインの著者です。

Answer 2

これが最善のアプローチである場合、私は確かではないんだけど、それは少しは解決した私のコードを再構築判明。私のコンポーネントの外にipcRenderer.onを持つ代わりに、コンポーネントのコンストラクタにネストする必要がありました。これは将来誰かを助けてくれることを願っています。

class SiteList extends Component { 
    constructor(props, context) { 
    super(props, context); 

    ipcRenderer.on('getSitesSuccess', (event, args) => { 
     console.log('data', args.data); 
     props.dispatch(actions.change('sites', args.data)); 
    }); 
    } 
}