用Electron+React手把手打造属于你自己的桌面应用

前端

2023-12-04 13:32:09

让我们开始吧

欢迎来到Electron+React桌面应用程序开发之旅的第二部分！在上篇文章中，我们搭建了一个基本的图书搜索界面。本篇我们将继续深入，探索更多高级功能，包括：

数据持久化： 我们将构建一个数据库来存储我们的图书数据，以便在应用程序关闭和重新启动后仍能保留这些数据。
状态管理： 我们将使用Redux来管理应用程序的全局状态，这将使我们能够轻松地处理复杂的数据流。
事件处理： 我们将了解如何处理用户交互事件，例如按钮点击、表单提交和窗口大小更改。

准备好迎接激动人心的旅程了吗？让我们开始吧！

数据持久化：构建数据库

为了持久化我们的图书数据，我们将使用SQLite，这是一款轻量级、无服务器的数据库引擎，非常适合桌面应用程序。

首先，我们需要安装SQLite3模块：

npm install sqlite3

接下来，在我们的应用程序中创建一个名为database.js的文件：

const sqlite3 = require('sqlite3').verbose();

const db = new sqlite3.Database('./books.db', (err) => {
  if (err) {
    console.error(err.message);
  }
  console.log('Connected to the database.');
});

module.exports = db;

此代码创建了一个新的SQLite数据库文件名为books.db，并建立了与数据库的连接。

现在，我们需要创建一张名为books的表来存储我们的图书数据：

db.run('CREATE TABLE IF NOT EXISTS books (id INTEGER PRIMARY KEY, title TEXT, author TEXT, description TEXT)', (err) => {
  if (err) {
    console.error(err.message);
  }
  console.log('Created the books table.');
});

这张表将包含以下列：

id：图书的唯一标识符（主键）
title：图书的标题
author：图书的作者
description：图书的

状态管理：引入Redux

Redux是一个状态管理库，它可以帮助我们在整个应用程序中管理复杂的数据流。它使用单一的事实来源，称为“store”，来存储所有应用程序状态，并提供了一个中央位置来更新和获取该状态。

首先，我们需要安装Redux和React-Redux模块：

npm install redux react-redux

接下来，在我们的应用程序中创建一个名为store.js的文件：

import { createStore } from 'redux';

const initialState = {
  books: []
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_BOOK':
      return {
        ...state,
        books: [...state.books, action.payload]
      };
    case 'REMOVE_BOOK':
      return {
        ...state,
        books: state.books.filter(book => book.id !== action.payload)
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

此代码创建了一个Redux store，其中包含一个名为books的初始状态，它是一个空数组。它还定义了一个reducer函数，它处理应用程序中的状态更改，例如添加或删除图书。

最后，我们需要将Redux store连接到我们的React应用程序：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';

// 我们的React应用程序组件...

<Provider>组件将store提供给应用程序中的所有组件，使它们可以访问和更新应用程序状态。

事件处理：响应用户交互

Electron+React应用程序可以响应各种用户交互事件，例如按钮点击、表单提交和窗口大小更改。

让我们从处理按钮点击事件开始：

import React from 'react';

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

export default Button;

此组件是一个简单的按钮，它调用onClick事件处理函数，当按钮被点击时触发。

接下来，让我们在我们的应用程序中使用它来添加一本书：

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import Button from './Button';

const AddBookForm = () => {
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');
  const [description, setDescription] = useState('');

  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();

    const book = {
      title,
      author,
      description
    };

    dispatch({ type: 'ADD_BOOK', payload: book });

    setTitle('');
    setAuthor('');
    setDescription('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
      <input type="text" value={author} onChange={(e) => setAuthor(e.target.value)} placeholder="Author" />
      <textarea value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Description" />
      <Button onClick={handleSubmit}>Add Book</Button>
    </form>
  );
};

export default AddBookForm;

此组件是一个表单，它允许用户输入图书的标题、作者和。当用户点击“Add Book”按钮时，handleSubmit函数将被调用，它使用dispatch函数将一个“ADD_BOOK”操作分派给store，并将新图书作为有效载荷。store随后将更新应用程序状态以包含新图书。

处理窗口大小更改事件也非常简单：

import React, { useEffect, useState } from 'react';

const WindowResizer = () => {
  const [windowSize, setWindowSize] = useState({ width: window.innerWidth, height: window.innerHeight });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <>
      <p>Window width: {windowSize.width}</p>
      <p>Window height: {windowSize.height}</p>
    </>
  );
};

export default WindowResizer;