С помощью наших стартовых наборов React и React Native для Baqend вы сможете создавать невероятно быстрые одностраничные приложения в кратчайшие сроки. Стартеры созданы с помощью Create React App и React Native CLI и используют:

  • React и React Native для создания быстрых и интерактивных пользовательских интерфейсов для веб-приложений и нативных приложений.
  • Reduxкак контейнер состояния для вашего приложения
  • Промежуточное программное обеспечение Redux Baqend для удобного использования Redux с Baqend
  • Baqend как полностью управляемый Backend-as-a-Service для упрощения разработки

Как использовать наши стартеры

  1. Убедитесь, что на вашем компьютере установлен Node.js.
  2. Установите интерфейс командной строки Baqend с помощью npm install -g baqend
  3. Оформить стартовый пакет с помощью baqend start react-redux-starter для стартового Reactили baqend start react-native-starter для стартового React Native
  4. Следуйте инструкциям стартера React или React Native.

Ваше приложение будет подключено к тестовому экземпляру Baqend под названием app-starter. Baqend предоставляет общие серверные функции, такие как хранение данных и файлов, аутентификация пользователей и запросы. Чтобы разработать собственное приложение, запустите бесплатный экземпляр Baqend на baqend.com и измените имя приложения в файле src/store/store.js вашего проекта с app-starter на имя вашего приложения.

Реагировать

React — это библиотека Javascript для создания пользовательских интерфейсов путем разделения его на отдельные компоненты. Это не фреймворк с такими функциями, как маршрутизация или поддержка HTTP-запросов, но вы можете легко расширить его, добавив библиотеки, созданные огромным сообществом React.

Однонаправленный поток данных

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

Несмотря на то, что вы можете передавать любой тип данных в компонент React, они должны рассматриваться как неизменяемые, а это означает, что после создания данных вы никогда не обновляете их, а вместо этого создаете новую их версию. Таким образом вы получаете новую ссылку, и компонент отображается с обновленными данными. Поэтому команда реагирования рекомендует использовать сериализуемые структуры данных для состояния ваших компонентов.

Редукс

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

Почему это важно для работы с Baqend?

При работе с нашим Baqend SDK вы всегда будете получать одну и ту же ссылку на объект, независимо от того, возвращается ли он результатом запроса или является встроенной ссылкой внутри другого объекта. объект. Таким образом, мы можем гарантировать, что все указанные данные будут актуальными в вашем приложении эффективным способом. Если вы обновляете объект, вызывая, например, его метод сохранения, нам не нужно сообщать другим объектам, что произошло обновление, так как он уже ссылается на самую новую версию.

Вот почему мы создали промежуточное ПО Redux Baqend, которое поможет вам поддерживать чистоту вашего приложения React, не теряя при этом удобного способа работы с Baqend. Вся связь с вашим экземпляром Baqend осуществляется в рамках определенных вами действий редукции. При успешных запросах результат конвертируется в объекты JSON перед передачей в хранилище избыточности. Когда вы хотите изменить свой объект, промежуточное ПО помогает вам получить исходную ссылку и применить к ней ваши изменения, внесенные в объект JSON.

Как это использовать

Прежде чем вы сможете использовать его, вам нужно настроить хранилище избыточности и подключить его к вашему экземпляру Baqend. Это легко сделать с помощью метода createStoreWithBaqend, который поставляется с промежуточным ПО.

import { createStoreWithBaqend } from 'redux-baqend'
import { db } from 'baqend'
import middleware from '../middleware'
import reducer from '../reducer'
export default function configureStore(initialState = {}) {
  return createStoreWithBaqend(
    db.connect('app-starter'),
    reducer,
    initialState,
    middleware
  )
}

Вот и все. Теперь вы можете определить свои действия, которые будут получать реальные данные из вашего приложения Baqend.

Минимальное действие

Получив такое действие, baqendMiddleware сделает следующее:

{
  'BAQEND': {
    type: 'ITEMS_LOAD',
    payload: (db) => db.Item.find().resultList()
  }
}
  1. Подождите, пока соединение с БД будет готово.
  2. Передайте объект db методу полезной нагрузки, определенному в вашем действии, и выполните его.
  3. Возьмите результат вашего запроса и проверьте, есть ли он уже в формате JSON. Если нет, он позаботится о преобразовании в JSON.
  4. Отправьтеследующее действие и передайте его следующему промежуточному программному обеспечению или вашим преобразователям.
{
  type: 'ITEMS_LOAD',
  payload: [
    { id: '/db/Item/1', value: 'value' },
    { id: '/db/Item/2', value: 'value' }
  ]
}

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

{
  'BAQEND': {
    type: 'ITEMS_LOAD',
    payload: (db) => {
      return db.Message.find().resultList().then(results => {
        return results.map(item => item.toJSON())
      })
    }
  }
}

Обновление объектов

Прежде чем вы сможете сохранить свои изменения в объекте, вы должны снова сделать из него объект Baqend. Это можно сделать, передав объект JSON в ваше действие или используя метод fromJSON, поставляемый с вашей сущностью.

...
payload: [ item, (db, item) => {
  item.save(options)
}]
or
payload: (db) => {
  item = db.Item.fromJSON(item)
  return item.save().then(item => {
    return item.toJSON()
  })
}

Начать и узнать больше

Для получения более подробной информации ознакомьтесь с документацией Redux-Baqend-middleware или ознакомьтесь с нашими стартовыми наборами React. Они показывают основное использование Baqend с React и React Native.

Развлекайся!

Не хотите пропустить наш следующий пост по темам React? Получите его удобной доставкой на ваш почтовый ящик, подписавшись на нашу рассылку новостей.