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ý!