Рубрики
Без рубрики

Использование Firebase с Redux для создания приложения React

В этом руководстве мы рассмотрим, как Firebase может быть интегрирован с помощью ADCEB-приложений через Redux. Мы будем использовать Redux-Thunk для отправки функций, которые взаимодействуют с Firebase, и подключить компоненты React Components в магазин Redux.

Автор оригинала: Vijay Thirugnanam.

I. FireBase

Firebase База данных Realtime – это облачная база данных из Google, которая расположена в виде Backend-As-A-Service (Baas). Это база данных NoSQL и данные хранятся в виде пар клавишных значений.

Начало работы с Firebase легко, и консоль доступен в https://console.firebase.google.com Отказ

Реагировать Firebase

Приведенная выше консоль Firebase – это снимок базы данных. Создание новой базы данных проста; Просто нажмите на кнопку «Создать новый проект» и дайте проект имя. Каждая база данных дана URL. Например, для этого учебника я создадим выборку базы данных FireBase под названием Redux-firebase-demo Отказ URL URL базы данных redux-firebase-demo-2dc15.firebaseio.com Отказ И что еще больше, каждый ключ в базе данных дан URL.

Хотя Firebase хранит данные в качестве пары ключа, данные могут быть организованы в иерархическом дереве. Каждый узел в дереве называется Ref И каждый Ref имеет свой URL. Например, база данных имеет два ссылка, повестки дня и хост. URL для Refs:

  • Повестка дня: redux-firebase-demo-2dc15.firebaseio.com/agenda.
  • Хозяин: redux-firebase-demo-2dc15.firebaseio.com/host.

REF может быть запрошена или обновлена как обычная база данных. Эти запросы или обновления могут произойти с интерфейса. Firebase предоставляет SDK, который позволяет в интерфейсных клиентах напрямую подключиться к нему. Тем не менее, есть SDK для приложений iOS, приложения для Android и веб-приложений (JavaScript).

Firebase гораздо интереснее, что обычная база данных. Почему? Потому что это в реальном времени. А что делает Firebase в режиме реального времени заключается в том, что Ref может излучать события на основе изменения данных на сервере.

Но достаточно введения. Давайте начнем на строительстве!

В этом руководстве мы рассмотрим, как Firebase может быть интегрирован с помощью ract web Application. Приложения React структурируются с помощью потоков данных Uni-Data и Redux – одна из самых популярных реализаций. Большинство операций Firebase обрабатываются в пределах слоя Redux, поэтому давайте включите в Redux, сначала!

II. Redux.

Redux организует данные в интернет-конце, используя три принципа.

  1. Состояние приложения хранится в одном предмете дерева.
  2. Государство только для чтения.
  3. Состояние можно изменить, испуская действие, которое описывает желаемое изменение.

Использование Redux в приложении позволяет использовать Uni-Data Data. Когда Redux используется с реагированием, данные из хранилища протекают через реквизиты в компонентах контейнера. Компоненты контейнера передают данные в соответствии с другими компонентами реагирования.

Всякий раз, когда компонент хочет изменить данные, хранящиеся в магазине, он готовит объект действия и отправляет объект действия в магазин. Магазин проходит на действие нескольким редукторам. Редуктор – это функция JavaScript, которая принимает предыдущее состояние хранилища и объект действий, а затем создает новое состояние для магазина. Организация модулей в пределах слоя Redux показана ниже.

Действия – это объекты, которые имеют тип действия. Объект действий отправляется в магазин. Чаще, чем нет, ADCT приложения взаимодействуют с данными через API. API отвечает за получение данных из бэкэнда и обновления данных, а взаимодействия API асинхронные. Когда запрос на получение данных сделан в API, API возвращается назад с данными через некоторое время.

Чтобы включить асинхронный коммуникацию в слое redux, redux имеет компонент промежуточного программного обеспечения под названием Redux-Thunk Отказ Thunk redux позволяет компоненту реагирования направлять функцию вместо объекта действия. Отправленная функция обычно взаимодействует с API и отправляет объект действия, когда он получает ответ от API.

Кроме Redux-Thunk , есть удобный пакет под названием React-redux Отказ Упаковка имеет провайдеры и разъемы для подключения компонента реагирования в магазин Redux. Компонент поставщика несет ответственность за предоставление компонентов в магазине ниже по течению. Функция Connect оборачивает реактивный компонент и обеспечивает состояние хранилища через реквизиты.

Для этого учебника мы будем использовать Redux-Thunk Для отправки функций, которые взаимодействуют с Firebase. Мы будем использовать React-redux Чтобы подключить компоненты RACT в магазин Redux.

III. Преимущества использования Firebase с Redux

Firebase Подключает базу данных к интерфейсу простым API, а функция FireBase в реальном времени является дополнительным бонусом. Можно использовать Firebase непосредственно внутри компонентов RACT React, но это сделает компоненты реагирования трудно поддерживать. Перемещение кода Firebase на слой redux значительно упрощает структуру кода, поскольку Redux передает данные к компонентам реагирования через реквизиты. Это, в свою очередь, позволяет писать функциональные или нестандартные компоненты, которые просто отображают реквизиты.

Внутри Руководство

Наше приложение образца – это простое приложение для приглашений для совещаний. URL App отправляется во многих гостей, в которых гость может принять приглашение на собрание. Когда гость принимает приглашение, список гостей обновляется в режиме реального времени во всех других браузерах, которые открыты приложение. Скриншот приложения для приглашения собрания показан ниже.

реагировать Firebase

A. Данные FireBase

Создайте новую базу данных FireBase, нажав кнопку «Создать новый проект». На панели инструментов проекта данные отображаются на дереве. Данные могут быть экспортированы и импортированы в базу данных.

Реагировать Firebase

База данных имеет три узла верхнего уровня: хост, повестка дня и гостей. Гости – это коллекция гостевых объектов.

Firebase не использует массивы для хранения коллекции, вместо этого он использует объекты с автоматически сгенерированными ключами. Мы импортируем данные в наш проект, используя следующие данные JSON.

{
  "agenda" : "Business meeting for the next Facebook",
  "guests" : {
    "-KUDHLoA79LzYXsXLNZM" : {
      "name" : "Dustin Moskovitz"
    },
    "-KUDHPgsYqOVcC-Db7-W" : {
      "name" : "Eduardo Saverin"
    },
    "-KUDHS9kUXPYWN8aqD6A" : {
      "name" : "Chris Hughes"
    },
    "-KUDHW9EmNahoyjdwJdf" : {
      "name" : "Elon Musk"
    }
  },
  "host" : "Mark Zuckerberg"
}

По умолчанию база данных FireBase имеет набор аутентификации. Чтобы сделать базу данных публично доступной для всех, нажмите « » Правила Вкладка на приборной панели базы данных Затем добавьте следующее правило:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

B. Scaffold Проект реагирования

Мы все настроены, чтобы написать какой-то код. Инициализируйте проект с помощью Package.json.

npm init

Мы устанавливаем производственные зависимости для нашего проекта.

npm install --save
react
react-dom
redux
react-redux
redux-thunk
redux-logger
firebase
bootstrap-sass

реагировать и React-Dom Пакеты необходимы для записи React Code. redux и React-redux Пакеты используются для подключения компонентов реагирования с помощью магазина Redux. Redux-Thunk и Redux-logger Пакеты Redux промежуточные программы и Firebase Пакет предоставляет простой интерфейс для взаимодействия с базой данных. Bootstrap-Sass С другой стороны, предоставляет стили загрузки для проекта.

Мы будем использовать WebPack для построения приложения Ract. Актуальные компоненты записываются в JSX и ES6. JSX и ES6 должны быть скомпилированы на JavaScript, что браузер понимает. Babel используется WebPack для транспиляции.

npm install --save-dev
webpack
webpack-dev-server
babel-core
babel-loader
babel-preset-react
babel-preset-es2015
node-sass
sass-loader
css-loader
style-loader

Кроме того, создайте файл .babelrc.

{
  "presets": ["es2015", "react"]
}

Используйте следующий файл конфигурации WebPack.

module.exports = {
  devtool: 'inline-source-map',
  entry: __dirname + '/app.jsx',
  output: {
    filename: 'bundle.js'
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        loader : 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }
    ]
  }
}

WebPack использует файл ввода, чтобы начать процесс сборки. Все файлы, на которые ссылаются файл ввода, включены в качестве входных файлов. WebPack использует погрузчики для обработки входных файлов. Погрузчики, используемые с вышеуказанной конфигурацией, являются Babel, CSS и SASS. Выход процесса сборки – это пакет, который имеет все скрипты, необходимые для запуска приложения.

Наш реагированный проект почти готов. Добавить app.jsx который является основным реагированным компонентом.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
Hello world
,
  document.getElementById('container'));

Создайте индексную страницу и включите выходной пучок.


  
    Meeting Invite

Использовать WebPack-Dev-Server Для начала сценария и запустите приложение, используя NPM начать команда.

"scripts": {
  "start": "webpack-dev-server --inline",
}

C. Создать магазин Redux

Создание магазина Redux включает создание корневого редуктора и нанесение компонентов промежуточного программного обеспечения. Мы начнем с создания базового редуктора для управления государством приглашения.

export function inviteReducer(state = {}, action) {
  switch(action.type) {
    default:
      return state;
  }
}

Redux предоставляет утилиту под названием Коммунатории составить корневой редуктор.

import { combineReducers } from 'redux';
import { inviteReducer } from './invite_reducer';

const rootReducer = combineReducers({
  invite: inviteReducer
});

export default rootReducer;

С корневым редуктором на месте мы можем создать магазин.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import createLogger from "redux-logger";
import rootReducer from '../reducers/root_reducer';

const logger = createLogger();

const store = createStore(rootReducer,
  {},
  applyMiddleware(thunk, logger)
);

export default store;

Redux-Thunk и Redux-logger являются двумя промежуточными пакетами, которые используются в создании магазина. Redux-Thunk Используется для отправки функций вместо объектов действия и промежуточное программное обеспечение выполняет функцию. Когда функция выполнена, одно или несколько объектов действия отправляются в магазин. Redux-logger Предоставляет полезные сообщения журнала в консоли браузера.

С созданным магазином мы должны подключить его к компоненту реагирования, используя React-redux Отказ Компонент поставщика – это компонент верхнего уровня в приложении React.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import InviteContainer from './containers/invite_container';
import store from './store/store';
import "./stylesheets/main.scss";

const main = (
  
    
  
);

ReactDOM.render(main, document.getElementById('container'));

Компонент InviteContainer в вышеупомянутой коде представляет собой компонент обертки, созданный React-redux. Он обертывает компонент приглашения путем инъекционных состояний и функций отправки через реквизиты.

import { connect } from 'react-redux';
import Invite from '../components/invite.jsx';

function mapStateToProps(state) {
  return {
    invite: state.invite
  };
}

function mapDispatchToProps(dispatch) {
  return {
  };
}

const inviteContainer = connect(mapStateToProps, mapDispatchToProps)(Invite);

export default inviteContainer;

В коде выше, соединить Функция принимает две параметры функции:

  • Первая функция предоставляет государственные опоры, которые вводятся в компонент приглашения.
  • Вторая функция предоставляет реквизиты отправки, которые вводятся в компонент приглашения.

Store redux теперь создан и настроен для использования в нашем приложении React.

D. Запрос данных из Firebase

Мы покажем базовую встречу пригласить, отображающую хост и повестку дня. Данные поступают из нашей базы данных FireBase. Для работы с Firebase нам нужно создать объект базы данных.

import firebase from 'firebase';

const config = {
  apiKey: 'your_api_key',
  authDomain: 'your_db_name.firebaseio.com',
  databaseURL: 'https://your_db_name.firebaseio.com/'
};

firebase.initializeApp(config);
const database = firebase.database();

export default database;

Инициализация приложения требует ключа API и URL базы данных. Объект базы данных используется для получения данных, обновления данных и обработки событий. Корневой узел в нашей базе данных – это объект приглашения, а код для получения значения корневого узла показан ниже.

database.ref('/').once('value', snap => {
  const invite = snap.val();
});

Мы создаем объект REF, пройдя в путь URL. Однажды Способ на работе используется для обработки первого вхождения события. Мы обращаемся к ценность событие, которое срабатывает, когда значение REF установлено. Функциональный обработчик получает снимок реф. Призывая валь Метод на снимок дает значение узла.

Нам нужно подключить вышеуказанный код в пределах действия Redux. Из нашего компонента мы отправим функцию, которая получает приглашение.

import ActionTypes from '../constants/action_types';
import database from './database';

export function getInvite() {
  return dispatch => {
    dispatch(getInviteRequestedAction());
    return database.ref('/').once('value', snap => {
      const invite = snap.val();
      dispatch(getInviteFulfilledAction(invite))
    })
    .catch((error) => {
      console.log(error);
      dispatch(getInviteRejectedAction());
    });
  }
}

function getInviteRequestedAction() {
  return {
    type: ActionTypes.GetInviteRequested
  };
}

function getInviteRejectedAction() {
  return {
    type: ActionTypes.GetInviteRejected
  }
}

function getInviteFulfilledAction(invite) {
  return {
    type: ActionTypes.GetInviteFulfilled,
    invite
  };
}

Getinvite Функция выполняется Redux-Thunk Отказ Получение данных из Firebase – это асинхронная операция, поэтому мы отправляем три объекта действия: запрошенные, выполненные и отклоненные.

  • Запрошенное действие отправляется до операции ASYNC.
  • Отработанное действие отправляется после успешной операции Async.
  • Отклоненное действие отправляется, если есть какая-либо ошибка.

Типы действий являются строки, которые определены в файле констант.

const actionTypes = {
  GetInviteRequested: 'GET_INVITE_REQUESTED',
  GetInviteRejected: 'GET_INVITE_REJECTED',
  GetInviteFulfilled: 'GET_INVITE_FULFILLED'
};

export default actionTypes;

Мы должны обновлять наш контейнерную компонент с функцией отправки ongetinvite.

import { getInvite } from '../actions/get_invite';
function mapDispatchToProps(dispatch) {
  return {
    onGetInvite: () => dispatch(getInvite()),
  };
}

Наконец, мы все настроены, чтобы получить данные в нашем компоненте реагирования. Ongetinvite опора называется, когда компонент установлен.

componentDidMount() {
  this.props.onGetInvite();
}

Эта функция отправляет Getinvite в магазин. Redux-Thunk Выполняет функцию, чтобы получить данные из базы данных FireBase. Затем данные снимка отправляются в магазин как Getinvitefullefultfult объект действий. Редукторы обновляют состояние магазина. Состояние приглашения доступно для компонента как реквизиты.

render() {
  const { host, agenda } = this.props.invite;
  return (
  

    

      
Meeting invite

    

    

      

        

          Host:
        

        

          {host}
        

      

      

        

          Agenda:
        

        

          {agenda}
        

      

    

  

  );
}

E. Обновить данные в Firebase

Для нашего приложения приглашенного любого человека, который имеет приглашение, можно нажать на Я пришел кнопка. Это добавит пользователя в список гостей. В базе данных также есть коллекция гостей, и мы хотим добавить гость в коллекцию гостей, когда они нажимают кнопку.

const guestsRef = database.ref('/guests');
guestsRef.push({
  name
});

Мы получаем гостей Ref и нажмите новый гостевой объект. Гостевой объект тривиален – он просто имеет имя гостей. Мы поместим этот код в действие Redux, поскольку мы сделали ранее.

import ActionTypes from '../constants/action_types';
import database from './database';

export function addToInvite(name) {
  return dispatch => {
    dispatch(addToInviteRequestedAction());
    const guestsRef = database.ref('/guests');
    guestsRef.push({
      name
    })
    .then(() => {
      dispatch(addToInviteFulfilledAction({ name }));
    })
    .catch((error) => {
      dispatch(addToInviteRejectedAction());
    });
  }
}

function addToInviteRequestedAction() {
  return {
    type: ActionTypes.AddToInviteRequested
  };
}

function addToInviteRejectedAction() {
  return {
    type: ActionTypes.AddToInviteRejected
  }
}

function addToInviteFulfilledAction(guest) {
  return {
    type: ActionTypes.AddToInviteFulfilled,
    guest
  };
}

Когда приведенное выше действие Redux отправляется в магазин, редуктор вызывается с Addottinvitefulfuld действие. Редуктор создает новое состояние приглашения при добавлении гостя.

case ActionTypes.AddToInviteFulfilled: {
  const newState = Object.assign({}, state, {
    inProgress: false,
    success: 'Added guest.'
  });
  newState.guests = newState.guests || [];
  newState.guests = newState.guests.slice();
  newState.guests.push(action.guest);
  return newState;
}

Компонент контейнера завернут новой функцией отправки.

import { getInvite } from '../actions/get_invite';
import { addToInvite } from '../actions/add_invite';

function mapDispatchToProps(dispatch) {
  return {
    onGetInvite: () => dispatch(getInvite()),
    onAddToInvite: (name) => dispatch(addToInvite(name))
  };
}

Наконец, мы обрабатываем обработчик событий Click кнопки для отправки Addottinvite функция. Форма приглашения с помощью входных и кнопок управления отображается ниже.


  

    

      Name:
    

    

       this.setState({ name: e.target.value })}
      />

F. обрабатывать события из Firebase

В предыдущем разделе мы обновили коллекцию гостей в Firebase с новым гостем. В редукторе мы обновили государство, чтобы включить вновь добавленный гость. Есть небольшое оговорку с подходом. Когда у меня открыт приглашение, когда гость добавляется с другого сеанса браузера, я не вижу новый гость в моем приглашении. В этом разделе мы будем использовать функцию Firebase в режиме реального времени для обновления гостя во всех сессиях браузера, имеющих приложение Invite.

Чтобы получить значение Ref, мы использовали Однажды метод. Однажды Метод обрабатывает первое возникновение события. Есть другой метод под названием на который обрабатывает все вхождение события. Мы будем использовать на Метод на Child_addoed Событие гостей Ref.

export function watchGuestAddedEvent(dispatch) {
  database.ref('/guests').on('child_added', (snap) => {
    dispatch(getGuestAddedAction(snap.val()));
  });
}

function getGuestAddedAction(guest) {
  return {
    type: ActionTypes.GuestAdded,
    guest
  };
}

WatchGuestadadedEvent Часы для Child_addoed Мероприятие на гостей Ref и отправляет объект действий с недавно добавленным гостем. Чтобы гарантировать, что мы всегда следите за событием, мы называем его из кода Connect.

import { getInvite } from '../actions/get_invite';
import { addToInvite } from '../actions/add_invite';
import { watchGuestAddedEvent } from '../actions/guest_added_event';

function mapDispatchToProps(dispatch) {
  watchGuestAddedEvent(dispatch);
  return {
    onGetInvite: () => dispatch(getInvite()),
    onAddToInvite: (name) => dispatch(addToInvite(name))
  };
}

Когда Повелил Действие отправляется, наш редуктор устанавливает новое приглашенное состояние. Соответствующий код редуктора показан ниже.

export function inviteReducer(state = {}, action) {
  switch(action.type) {
    case ActionTypes.AddToInviteFulfilled: {
      const newState = Object.assign({}, state, {
        inProgress: false,
        success: 'Added guest.'
      });
      // newState.guests = newState.guests || [];
      // newState.guests = newState.guests.slice();
      // newState.guests.push(action.guest);
      return newState;
    }
    case ActionTypes.GuestAdded: {
      const newState = Object.assign({}, state);
      newState.guests = newState.guests || [];
      newState.guests = newState.guests.slice();
      newState.guests.push(action.guest);
      return newState;
    }
  }
}

Addottinvitefulfuld Код редуктора прокомментирован. Этот же код доступен при обработке Повелил действие. Это делает наше приложение в режиме реального времени.

Г. Упаковка

Мы охватываем много земли в руководстве. Мы начали с того, как создается база данных Firebase. Затем мы лежали на восстановлении приложения React с помощью WebPack. Мы создали магазин Redux. Мы запросили данные, обновляемые данные и обрабатываемые событиями от Firebase.

Firebase – это база данных в реальном времени и NoSQL из Google. Это просто и интуитивно понятно, чтобы использовать. Redux – это популярное внедрение рисунка потока, который позволяет однонаправленным потоком данных. Использование Firebase и Redux вместе делает код для поддержания.

Есть сопроводительное Проект GitHub на учебное пособие, которое вы можете использовать, чтобы следовать.

Другие учебные пособия, которые вас могут быть заинтересованы в

  • Обработка Ajax в вашем реагированном приложении с ловкостью
  • Серверный рендеринг с Redux и React-маршрутизатор
  • Начало работы с React Redux: Intro

Читайте ещё по теме: