如何在电子的多个窗口之间共享状态（反应）？

Question

我正在开发一个桌面应用程序，对 UI 和电子做出反应。

所以，现在，我从服务器获取数据并使用 React 的 Context API 将其保存在状态中以更新 UI。

我在渲染器进程中保留状态和添加、删除和更新状态的函数，并且使用 IPC 我通过主进程（应该是这样）在渲染器进程之间共享数据。

但是随着应用程序的扩展，我需要一个更好的方法。类似于中央国家的东西（如果那是一回事）。

PS 如果有任何实时数据库（例如 rxdb），我可以将数据库与 Electron 应用程序一起使用吗？

Answer 1

拥有“主状态”的最佳方法是使用React-Redux。

Redux 可以做 Context 所做的事情，甚至更多。它还具有许多用于监听服务器实时更新的库。当时最流行的是React-Redux-Firebase，它将 Reduxstore与 Firebase 数据库连接起来。

大多数开发人员都同意 Redux 需要一些时间来设置，但绝对值得投入时间。我个人使用过 React-Redux-Firebase，我可以向您保证，所有实时更新都将store在 250 毫秒内出现在您的 Redux 中。

Firebase 在一定程度上也是免费的（查看Firebase 定价）。

为了state在组件中访问 Redux，您需要遵循 3 个步骤：

第 1 步：创建一个mapStateToPropsconst，其中包含您想要从store.

const mapStateToProps = state => ({
    customers: state.customers,
    books: state.books
})

第 2 步：创建一个actionsconst，其中包含您在某个actions.js文件或类似文件中拥有且要调用的任何函数

import { fetchCustomers } from './actions.js'

const actions = {
    fetchCustomers
}

请记住，从 API 进行的任何获取都可以（并且应该）从那里完成。

第3步：使用Redux的connect函数导出您的组件，包括您的mapStateToProps和actionsconsts。

export default connect(mapStateToProps, actions)(myComponent);

Redux 相当复杂，无法在单个 stackoverflow 答案中进行解释，因此我建议您查看文档或遵循教程。您应该能够在开发的第一天或第二天就解决所有问题。这绝对值得花时间。