Как разделить состояние (реакцию) между электронными кратными windows?

Question

Я разрабатываю настольное приложение с реагированием на пользовательский интерфейс и электрон.

Итак, сейчас я получаю данные с сервера и сохраняю их в состоянии, используя контекстный API React для обновления пользовательского интерфейса.

Я сохраняю состояние и функцию добавления, удаления и обновления состояния в процессе рендерера и с IP C Я делюсь данными между процессом рендерера через основной процесс (как и должно быть).

Но так как приложение масштабируется, мне нужен лучший подход. Что-то вроде центрального состояния (если это так).

PS Могу ли я использовать базу данных вместе с приложением Electron, если есть какая-либо база данных в реальном времени, такая как rxdb?

Answer 1

Лучший способ получить «основное состояние» - это использовать React-Redux .

Redux может делать то же, что и Context, и многое другое. Он также имеет множество библиотек для прослушивания обновлений в реальном времени с серверов. Наиболее популярным в то время является React-Redux-Firebase , который соединяет ваш Redux store с базой данных Firebase.

Большинство разработчиков согласны с тем, что Redux требуется некоторое время для установки вверх, но определенно стоит потраченного времени. Я лично использовал React-Redux-Firebase и могу заверить вас, что все обновления в реальном времени будут в вашем Redux store в течение 250 мс.

Firebase также бесплатна до определенного момента (отметьте Firebase Pricing ).

Чтобы получить доступ к вашему Redux state в компоненте, вам необходимо выполнить 3 шага:

ШАГ 1: Создать mapStateToProps const, который содержит все, что вы хотите от вашего store.

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

STEP2: Создайте константу actions, которая содержит любые функции, которые у вас есть в actions.js или аналогичном файле, и вы хотите вызвать

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

const actions = {
    fetchCustomers
}

Помните, что любую выборку из вашего API можно (и нужно) делать оттуда.

ШАГ 3: Экспортируйте ваш компонент с помощью функции connect Redux, включая ваши mapStateToProps и actions consts.

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

Redux довольно сложен, чтобы его можно было объяснить одним ответом на стек, поэтому я предлагаю вам взглянуть на docs или следовать учебному пособию. Вы должны быть в состоянии выяснить все в ваш первый или второй день разработки. Это абсолютно стоит времени.