Это часть 9 моей серии React Learning. Используя знания, почерпнутые из React Веса Боса для начинающих.
Мы сделали довольно умное CRUD-приложение, в котором состояние и свойства используются для реагирования и соответствующего обновления визуальных элементов. До сих пор наши приложения React были нестабильны, как если бы мы обновили страницу или закрыли браузер, мы потеряли бы то, что сделали. Что было бы здорово, если бы был простой способ отразить наше состояние в базе данных. К счастью для нас, он есть!
(*Под удачей я на самом деле имею в виду спасибо всем замечательным людям, которые создают такие вещи для остальных!)
Представляем Firebase
Firebase — это база данных реального времени от Google. Он использует Websockets, что позволяет вносить изменения в реальном времени, а не обновлять через Ajax или что-то подобное.
Первым делом нам нужно установить Firebase, для чего требуется учетная запись Google. Я предполагаю, что вы хорошо разбираетесь в этом.
Затем перейдите на http://firebase.google.com и выберите Добавить проект.
Дайте ему уникальное имя, а затем создайте его, что займет около 30 секунд.
Вам будет представлена целевая страница со всевозможными игрушками, аналитикой, аутентификацией и т. д. Это довольно много сообщений в блоге, но сейчас давайте посмотрим на базу данных… нажав «База данных».
Выбор базы данных. На момент написания в качестве вариантов базы данных использовались база данных в реальном времени и бета-версия Cloud Firestore. Давайте возьмем Real-time Database, так как сейчас нам не нужно ничего особенного.
Правила безопасности По умолчанию база данных должна запускаться в locked mode, что останавливает любое чтение или запись. Сейчас мы можем использовать test mode, который разрешает все операции чтения и записи. В продакшн-приложении мы, очевидно, не хотели бы этого делать, но пока это облегчит жизнь.
Детали соединения Теперь у нас есть пустая база данных, как мы будем работать с ней в нашем коде? Из ссылки Project Overview вы должны увидеть Add Firebase to your Web App Button, которая сгенерирует фрагмент кода, который мы можем использовать.
Держите этот код под рукой на секунду, сначала нам нужен файл в нашем приложении, который позволит нам использовать эту информацию…
Все о base.js
Поскольку мы сохраняем эту модульность, мы хотим создать файл с именем base.js в нашем каталоге src, который будет обрабатывать соединение с базой данных.
Для этого требуются следующие импорты/пакеты. Установите их через npm, если у вас их еще нет:
- Re-base, полезная библиотека для отражения нашего состояния
import Rebase from "re-base" - Firebase, основная библиотека Firebase для базы данных (я произношу это слово) любых других данных, кроме состояния:
import firebase from "firebase"
Чтобы начать использовать firebase, нам нужно использовать метод initializeApp со свойствами apiKey, authDomain and DatabaseURL as. Который мы можем взять из того фрагмента кода, который я сказал вам держать около минуты назад.
Мы можем поместить это в константу следующим образом:
Во-вторых, нам нужно настроить наши привязки Rebase:
const base = Rebase.createClass(firebaseApp.database())
Наконец, нам нужно экспортировать firebaseApp как именованный экспорт:
export {firebaseApp}
И база по умолчанию:
export default base;
Получение нашего состояния для отражения в нашей базе данных
Перейдите к нашему App.js и импортируйте наш base.js:
import base from '../base
Здесь нам нужно использовать lifecycle method с именем componentDidMount. Это выполняет набор инструкций, когда компонент впервые загружается на страницу. Существует множество методов жизненного цикла, которые стоит обсудить в другой раз. Но пока давайте вернемся к следующему методу:
Давайте немного объясним
this.ref — позволяет нам ссылаться на эту конкретную привязку, если нам нужно будет что-то с ней сделать позже.
syncState — метод перебазирования. Двусторонняя привязка между любым свойством состояния вашего компонента и любой конечной точкой в Firebase. Требуется строковый аргумент, чтобы указать конечную точку, т. е. с какой частью базы данных синхронизироваться. Плюс объект дополнительных опций, context и state
В качестве конечной точки мы хотим использовать сгенерированное нами хранилище. Мы получили идентификатор магазина из реквизита, и на самом деле он предоставляется маршрутизатором React, а /groceries гарантирует, что мы синхронизируем только эту часть состояния.
context — компонент, для которого мы хотим синхронизировать состояние.
state — свойство, которое вы хотите синхронизировать с Firebase.
Это немного для понимания, но не бойтесь читать документы для Re-base.
Вот и все! Это может выглядеть корявым, но это короткий код для довольно мощного действия. Если мы перейдем к базе данных на консоли Firebase, мы должны увидеть там отражение состояния/продуктов. Кроме того, поскольку это двусторонняя синхронизация, мы можем изменить значения на любом конце и увидеть, как изменение реплицируется почти мгновенно!
Делаю уборку
Есть небольшая загвоздка…
Каждый раз, когда компонент монтируется, мы настраиваем синхронизацию для данного хранилища. Однако мы никогда не останавливаем его, не синхронизируя, он вполне счастливо будет продолжать следить за изменениями для этого магазина до скончания века. Или пока у нас не закончится память…
Чтобы остановить это, мы можем использовать другой метод жизненного цикла, componentWillUnmount. Который запускается всякий раз, когда компонент закрывается по какой-либо причине. Мы можем использовать это, чтобы удалить нашу привязку:
…и именно поэтому нам понадобился this.ref!
Последние мысли
Раньше я использовал Mongo, у Firebase тоже довольно приятный способ работы. Я думаю, что есть определенная серия статей о других вариантах использования Firebase. Хотя, наверное, забудет…
