Reset stavu a aktualizace pomocí React

Pokud mě sledujete na Twitteru, budete vědět, že jsem si React opravdu oblíbil, stejně jako zřejmě všichni ostatní ve světě vývoje JavaScriptu. Aplikace React, na které pracuji, je relativně malá, vytváří požadavky na načítání k odesílání a přijímání dat, vykresluje pouze jednu sadu dat, takže hodně resetuji komponentu state spolu s malým state úpravy v závislosti na výsledku požadavku AJAX. Pojďme se podívat, jak to dělám já!

JavaScript

Na state toho moc není objekt -- jen několik vlastností:

class Controller extends React.Component {

  // Added as a component property
  defaultState = { data: null, error: null };

  constructor(props) {
    super(props);

    // Set the default state immediately
    this.state = this.defaultState;
  }

  // ....
}

Pravděpodobně můžete získat buď data nebo error bude mít data, druhý bude null , takže v podstatě resetuji původní hodnotu stavu a poté vyplním data nebo error . K tomu jsem vytvořil resetStateWithUpdates metoda, která vypadá následovně:

resetStateWithUpdates(stateUpdates = {}) {
  // Rest operators ensure a new object with merged properties and values.
  // Requires the "transform-object-rest-spread" Babel plugin
  this.setState({ ...this.defaultState, ...stateUpdates });
}

A používá se jako:

// Ooops, fetch error!
// `data` implicitly reset to null
this.resetStateWithUpdates({
  error: 'Fetching data failed!  Please try again!',
});

// ... or we got good data!
// `error` implicitly reset to null
this.resetStateWithUpdates({ data });

Použití operátoru spread ke sloučení výchozího stavu a aktualizovaných informací o stavu ušetří několik vykreslení z více setState hovory. Kód je také velmi krátký!

Každý má svůj vlastní způsob, jak zacházet se stavem ve svých aplikacích React, takže netvrdím, že je to nejlepší způsob resetování stavu pomocí malé aktualizace, ale pro mě to funguje úžasně. Kód je krátký, popisný a znovu použitelný!