Redux 是一個非常流行的狀態管理工具，通常用於 React 應用中。它採用單一的狀態樹，所有應用狀態存在一個地方，並通過單向資料流進行管理。當我們使用 Electron 來構建桌面應用時，隨著應用的增長，我們也需要一個統一的方式來管理應用狀態，這時候就可以考慮引入 Redux。
在 Electron 中使用 Redux，我們的應用會有兩個主要部分：
Redux 狀態管理會主要集中在渲染程序中，不過，我們可以通過 Electron IPC (Inter-Process Communication) 來實現跨程序的狀態同步。
我們將通過以下步驟，展示如何在 Electron 中設置並使用 Redux 來管理應用狀態。
首先，我們需要創建一個 Electron 項目並安裝所需的依賴，包括 Electron、Redux 和 React 等庫。
mkdir electron-redux-app
cd electron-redux-app
# 初始化 npm 項目
npm init -y
# 安裝 Electron
npm install electron --save-dev
# 安裝 React、Redux 及相關套件
npm install react react-dom redux react-redux
package.json 文件我們需要配置 Electron 的入口點。main 指定主程序的代碼，start 命令用於運行應用。
{
"name": "electron-redux-app",
"version": "1.0.0",
"main": "src/main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^25.2.0"
},
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"redux": "^4.0.0",
"react-redux": "^8.0.0"
}
}
main.js)主程序負責創建視窗並加載我們的前端頁面，這裡我們設置一個簡單的視窗來渲染 React 組件。
// src/main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
contextIsolation: false,
},
});
win.loadFile('src/index.html');
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
接下來，我們設置 Redux 的 store 和 React 組件來顯示應用的狀態。首先，我們需要創建一個 Redux store 並將它提供給 React 應用。
// src/store.js
import { createStore } from 'redux';
// 初始狀態
const initialState = {
counter: 0,
};
// 定義 reducer
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { counter: state.counter + 1 };
case 'DECREMENT':
return { counter: state.counter - 1 };
default:
return state;
}
};
// 創建 store
const store = createStore(counterReducer);
export default store;
我們使用 React-Redux 來將 Redux store 提供給 React 應用，並使用 useSelector 和 useDispatch 來讀取和修改狀態。
// src/App.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
function App() {
const counter = useSelector((state) => state.counter);
const dispatch = useDispatch();
return (
<div>
<h1>Counter: {counter}</h1>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
);
}
export default App;
最後，我們將 Redux store 提供給整個 React 應用。
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
確保你的 HTML 文件能夠渲染 React 應用。
<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Electron Redux App</title>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="module"></script>
</body>
</html>
完成這些設置後，你可以運行應用來測試。
npm start
你會看到一個帶有 增減按鈕的計數器應用，並且每次點擊按鈕時，Redux store 中的狀態會更新並顯示在視圖上。
Electron 應用中經常會有多個視窗，這些視窗需要共享同一個狀態。Redux 可以與 IPC (Inter-Process Communication) 協同工作來實現多視窗的狀態同步。
這樣可以確保多個視窗共享同一份狀態，並且狀態變更可以在視窗之間即時同步。
在 Electron 中使用 Redux 可以幫助你更好地管理應用狀態，尤其是當應用需要多窗口協作時，Redux 能夠保證狀態的統一性和可預測性。通過 IPC，你可以實現跨程序
iThome鐵人賽
看影片追技術