Kako reagirati na pravi način urediti Datagrid u realnom vremenu

Datagrid vam omogućuje prikaz i uređivanje podataka. Ovo je vitalna značajka u većini aplikacija vođenih podacima.

Možda ste to implementirali u jednoj od svojih React aplikacija u prošlosti. Možda ste koristili biblioteke poput react-bootstrap-table, reakct-grid ili react-table. Pomoću njih možete dodati Datagrid svojoj aplikaciji React. Ali što ako želite da se promjene izvrše u stvarnom vremenu, a ažuriranja sinkroniziraju na svim povezanim uređajima i njihovim preglednicima?

U ovom članku pokazat ću vam kako izgraditi podatkovnu mrežu u stvarnom vremenu u React-u koristeći reakcijsku tablicu i Hamoni Sync.

react-table je lagana i brza knjižnica za prikazivanje tablica u React-u, a podržava paginaciju i mnoge druge značajke.

Hamoni Sync je usluga sinkronizacije stanja u stvarnom vremenu koja vam omogućuje sinkronizaciju stanja aplikacije u stvarnom vremenu. Pokazat ću vam kako stvoriti podatkovnu mrežu s imenom i prezimenom ljudi.

Ako želite slijediti dalje, trebali biste imati neko znanje o React-u i instalirati sljedeće alate:

  1. NodeJS
  2. npm & npx. Ako ste instalirali npm verziju 5.2.0 ili noviju, ona instalira npx uz npm.
  3. Stvaranje-reagiraju-aplikaciju

Kreirajte aplikaciju React

Prvo ćemo kreirati novi projekt React pomoću aplikacije create-react.

Otvorite naredbeni redak i pokrenite npx create-react-app realtime-react-datatable. Ovo će pokrenuti aplikaciju React za nas kreiranjem nove mape u realnom vremenu-reakcija-datotekama s datotekama potrebnim za izgradnju React aplikacije.

Kada je stvorena aplikacija React, potrebno je instalirati reaktivnu tablicu i Hamoni Sync. Još u naredbenom retku pokrenite cd realtime-react-datatable da biste se prebacili na direktorij aplikacije. Pokrenite npm i reagirajte na tablici hamoni-sync u naredbenom retku da biste instalirali oba paketa.

Vratite Datagrid

Da bismo prikazali mrežu podataka, upotrijebit ćemo komponentu reakcijske tablice. Otvorite datoteku src / App.js i ažurirajte je s donjim kodom:

import React, {Component} iz "reagirati";
uvoz logotipa iz "./logo.svg";
uvoz "./App.css";
// Uvezi tablicu reagiranja
import ReactTable iz "react-table";
import "react-table / react-table.css";
// Uvezi Hamoni Sync
uvesti Hamoni iz "hamoni-sync";
klasa aplikacija proširuje komponentu {
  constructor () {
    super();
    this.state = {
      podaci: [],
      ime: "",
      prezime: ""
    };
  }
  handleChange = događaj => {
    ako (event.target.name === "firstName")
      this.setState ({firstName: event.target.value});
    ako (event.target.name === "lastName")
      this.setState ({lastName: event.target.value});
  };
  handleSubmit = događaj => {
    event.preventDefault ();
  };
  renderEditable = cellInfo => {
    povratak (
      
{           podaci const = [... this.state.data];           data [cellInfo.index] [cellInfo.column.id] = e.target.innerHTML;           this.setState ({podaci});         }}         dangerouslySetInnerHTML = {{           __html: this.state.data [cellInfo.index] [cellInfo.column.id]         }}       />     );   };
  render () {
    const {data} = this.state;
    povratak (
      
        
          logo           

Dobrodošli u React

                 

                       

Dodavanje novog zapisa

             {""}             
            
          
        
        
           (                   
                )               }             ]}             defaultPageSize = {10}             className = "- prugasti-svjetlo"           />                     );   } }
izvoz zadane aplikacije;

Gornji kôd čini oblik i komponentu reaktivne tablice za uređivanje. čini komponentu s rekvizitima podataka, stupaca i defaultPageSize. Podatkovni rekviziti sadrže podatke za prikaz, a podupirači za definiciju stupca. Svojstvo pristupnika u rekvizitima stupaca pokazuje svojstvo koje drži vrijednost koja će biti prikazana za taj stupac. Ćelija: svojstvo this.renderEditable u rekvizitima stupaca kaže tablici reakcije da se stupac može uređivati. Ostale funkcije (handleSubmit & handleChange) omogućuju unos novih podataka iz obrasca na stranici.

Dodajte Hamoni Sync

Podaci za datagrid dohvatit će se i ažurirati u stvarnom vremenu pomoću Hamoni Sync. Već smo uvezli biblioteku Hamoni na liniji 18 u App.js;

uvesti Hamoni iz "hamoni-sync";

Moramo ga inicijalizirati i povezati s Hamoni serverom. Da bismo to učinili, potreban nam je ID računa i aplikacije. Slijedite ove korake za stvaranje aplikacije u Hamoni.

  1. Registrirajte se i prijavite se na nadzornu ploču Hamoni
  2. Unesite željeno ime aplikacije u tekstno polje i kliknite gumb stvori. To bi trebalo stvoriti aplikaciju i prikazati je u odjeljku s popisom aplikacija.
  3. Kliknite gumb "Prikaži račun ID" kako biste vidjeli ID svog računa.

Dodajte sljedeći kôd u App.js da se inicijalizira i povežete s Hamoni Sync serverom.

komponentaDidMount () {
    neka hamoni = novi Hamoni ("ACCOUNT_ID", "APP_ID");
    hamoni
      .Spojiti()
      . tada (() => {
      })
      .catch (console.log);
  }

Gornji kôd povezat će uređaj klijenta ili preglednik s poslužiteljem Hamoni Sync. Kopirajte svoj račun i ID aplikacije s nadzorne ploče i zamijenite ih s rezerviranim nizom niza.

Dodajte sljedeće u funkciju u tadašnjem bloku () koja će se izvršiti kad se uspješno poveže na poslužitelj:

hamoni
    .get ( "DataGrid")
    . tada (listPrimitivan => {
      this.listPrimitive = listPrimitive;
      this.setState ({
        podaci: [... listPrimitive.getAll ()]
      });
      listPrimitive.onItemAdded (item => {
        this.setState ({podaci: [... this.state.data, item.value]});
      });
      listPrimitive.onItemUpdate (item => {
        neka podaci = [
        ... this.state.data.slice (0, item.index),
        item.value,
        ... this.state.data.slice (item.index + 1)
        ];
        this.setState ({podaci: podaci});
      });
      listPrimitive.onSync (podaci => {
        this.setState ({podaci: podaci});
      });
    })
    .catch (console.log);

Gornji kôd poziva hamoni.get ("datagrid") radi dobivanja podataka, s datagridom kao imenom stanja aplikacije u Hamoni Sync. Hamoni Sync omogućava vam pohranjivanje 3 vrste stanja koje se nazivaju Sync primitivi. Oni su:

  1. Primitivna vrijednost: Ova vrsta stanja sadrži jednostavne podatke predstavljene tipovima podataka poput stringa, boola ili brojeva. Najprikladnije je za slučajeve poput broja nepročitanih poruka, prebacivanja itd.
  2. Primitivni objekt: Stanje objekta predstavlja stanja koja se mogu modelirati kao JavaScript objekt. Primjer upotrebe može biti pohranjivanje rezultata igre.
  3. Popis primitivni: sadrži popis državnih objekata. Državni objekt je JavaScript objekt. Možete ažurirati stavku na temelju njenog indeksa na popisu.

Ako je država dostupna ona se rješava i vraća obećanje s primitivnim objektom države. Ovaj nam objekt daje pristup metodama za ažuriranje stanja i dobivanje ažuriranja stanja u stvarnom vremenu.

U liniji 36 koristili smo metodu getAll () za dobivanje podataka i podešavanje stanja za komponentu React. Također, metode onItemAdded () i onItemUpdated () koriste se za dobivanje ažuriranja kada se stavka doda ili ažurira. Metoda onSync () korisna je u scenariju kada uređaj ili preglednik gube vezu, a kad se ponovno poveže, pokušava dobiti najnovije stanje s poslužitelja i ažurirati lokalno stanje ako ga ima.

Dodavanje i ažuriranje stavki

Iz prethodnog odjeljka u mogućnosti smo dobiti podatke za datagrid i ažurirati stanje kad se stavka doda ili ažurira. Dodajmo kôd za dodavanje novih stavki i ažuriramo stavku kada je stupac uređen. Dodajte sljedeći kôd u handleSubmit metodu:

handleSubmit = događaj => {
    this.listPrimitive.push ({
        firstName: this.state.firstName,
        lastName: this.state.lastName
    });
    this.setState ({firstName: "", lastName: ""});
    event.preventDefault ();
};

Ovaj kôd dobiva ime i prezime iz obrasca i dodaje ga u popis primitivnog stanja na Hamoni Sync pozivom push () metode. To će pokrenuti metodu onItemAdded ().

Da bismo ažurirali stavke kako se uređuju u datagridu, ažurirat ćemo funkciju koja je proslijeđena onBlur rekvizitima u retku 84 na sljedeći način:

onBlur = {e => {
    neka red = this.state.data [cellInfo.index];
    red [cellInfo.column.id] = e.target.innerHTML;
    this.listPrimitive.update (cellInfo.index, red);
}}

Ovaj kôd ažurira stavku u indeksu koji je dohvaćen iz objekta cellInfo. Da biste ažurirali primitivno stanje popisa u Hamoni Sync, nazovite metodu update () s indeksom stavke i vrijednosti koju želite ažurirati. Metoda renderEditable sada bi trebala izgledati ovako nakon posljednje promjene:

renderEditable = cellInfo => {
    povratak (
      
{           neka red = this.state.data [cellInfo.index];           red [cellInfo.column.id] = e.target.innerHTML;           this.listPrimitive.update (cellInfo.index, red);         }}         dangerouslySetInnerHTML = {{           __html: this.state.data [cellInfo.index] [cellInfo.column.id]         }}       />     );   };

U ovom trenutku imamo gotovo sve što je potrebno za pokretanje aplikacije, osim početnih podataka koji će se prikazivati ​​na datagridu.

Moramo stvoriti državu i dati joj neke podatke o Hamoni Sync. Dodajte novu datoteku seed.js u korijenu radne mape i dodajte joj sljedeći kôd:

const Hamoni = zahtijevati ("hamoni-sync");
neka hamoni = novi Hamoni ("AccountID", "APP_ID");
hamoni
  .Spojiti()
  . tada (odgovor => {
    hamoni
      .createList ("datagrid", [
        {firstName: "James", lastName: "Darwin"},
        {firstName: "Jimmy", lastName: "kolovoz"}
      ])
      . tada (() => console.log ("stvori uspjeh"))
      .catch (console.log);
  })
  .catch (console.log);

Ovo će stvoriti popis primitivnog stanja na Hamoni Sync, s imenom datagrid-a. Zamijenite niz AccountID i APP_ID svojim računom i ID-om aplikacije. Otvorite naredbeni redak i pokrenite čvor seed.js. Ovo bi trebalo uspjeti i ispisati stvoriti poruku o uspjehu.

Sada možemo pokrenuti aplikaciju React i vidjeti našu aplikaciju u akciji! U naredbenom retku pokrenite naredbu npm start i ona će otvoriti aplikaciju u vašem zadanom pregledniku.

Hura! Imamo podatkovnu mrežu s uređivanjem u stvarnom vremenu!

Zaključak

Izgradili smo datagrid u stvarnom vremenu u React-u koristeći reakcijsku tablicu i Hamoni Sync. Pomoću tablice reakcija napaja se datagrid i Hamoni Sync koji upravlja stanjem za datagrid. Sve je to postignuto u nekoliko redaka koda i manje napora dizajniranja logike stanja u stvarnom vremenu. Možete dobiti gotovu aplikaciju onoga što smo izgradili na GitHubu. Moguće je pratiti koja ćelija uređuje ili zaključava ćelije koje trenutačno uređuje drugi korisnik. Ostavit ću to kao vikend za tebe.

Slobodno ostavite komentar ako nešto nije jasno ili naiđete na probleme dok pokušavate dodati zaključane ili istaknute stanice koje uređuju.

Sretno kodiranje