Firestorter 项目教程

Firestorter 项目教程

firestorterUse Google Firestore in React with zero effort, using MobX 🤘项目地址:https://gitcode.com/gh_mirrors/fi/firestorter

1、项目介绍

Firestorter 是一个用于在 React 应用中轻松集成 Google Firestore 实时数据的库。它结合了 MobX 的强大功能，提供了一个简单易用的 API，使得开发者可以在几分钟内快速启动并运行 Firestore 数据。Firestorter 的设计理念是减少复杂性，避免使用复杂的存储、提供者、动作或 reducers，让开发者能够专注于业务逻辑。

Firestorter 支持 Firebase v9 API，并且兼容 React Native、compat 模式以及旧版本的 Firebase SDK。

2、项目快速启动

安装依赖

首先，使用 Yarn 安装 Firestorter 和相关依赖：

yarn add firestorter mobx mobx-react firebase

初始化 Firebase 和 Firestorter

在项目中初始化 Firebase 和 Firestorter：

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { initFirestorter } from 'firestorter';
import makeWebContext from 'firestorter/web';

// 初始化 Firebase 应用
const app = initializeApp({
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxxxxxx"
});

const firestore = getFirestore(app);

// 初始化 Firestorter
initFirestorter(makeWebContext({ firestore }));

创建 Collection 或 Document

创建一个 Firestore 的 Collection 或 Document：

import { Collection, Document } from 'firestorter';

const todos = new Collection('todos');
const user = new Document('users/8273872***');

使用 MobX 的 observer 模式

将组件包装在 MobX 的 observer 中，以便在 Firestore 数据变化时自动更新 UI：

import * as React from 'react';
import { observer } from 'mobx-react';

const Todos = observer(() => {
  return (
    <div>
      {todos.docs.map((doc) => (
        <TodoItem key={doc.id} doc={doc} />
      ))}
    </div>
  );
});

const TodoItem = observer(({ doc }) => {
  const { finished, text } = doc.data;
  return (
    <div>
      <input type='checkbox' checked={finished} />
      <input type='text' value={text} />
    </div>
  );
});

3、应用案例和最佳实践

实时数据更新

Firestorter 通过 MobX 的 observer 模式，使得组件能够在 Firestore 数据发生变化时自动更新。这使得开发者在处理实时数据时无需手动管理状态更新，极大地简化了开发流程。

数据筛选与排序

Firestorter 支持对 Collection 进行筛选和排序。例如，可以通过 query 方法对数据进行过滤：

todos.query = (ref) => ref.where('finished', '==', false);

性能优化

Firestorter 只会在必要时获取和重新渲染数据，从而优化了应用的性能。开发者无需担心不必要的网络请求和渲染开销。

4、典型生态项目

React Native

Firestorter 可以与 React Native 结合使用，通过 react-native-firebase 库来集成 Firebase。

MobX

Firestorter 与 MobX 深度集成，提供了强大的状态管理功能，使得开发者可以轻松管理复杂的状态逻辑。

Firebase

Firestorter 是基于 Firebase Firestore 的，因此与 Firebase 的其他服务（如 Authentication、Storage 等）可以无缝集成。

通过以上步骤，您可以快速上手 Firestorter，并在 React 应用中轻松集成 Firestore 的实时数据。

firestorterUse Google Firestore in React with zero effort, using MobX 🤘项目地址:https://gitcode.com/gh_mirrors/fi/firestorter