Se o senhor me seguir no Twittero senhor saberá que eu gosto muito de Reagir, assim como aparentemente todo mundo no mundo do desenvolvimento de JavaScript. O aplicativo React em que estou trabalhando é relativamente pequeno, tornando solicitações de busca para enviar e receber dados, renderizando apenas um conjunto de dados, portanto, estou fazendo muitas redefinições de componentes state juntamente com um pequeno state dependendo do resultado da solicitação AJAX. Vamos dar uma olhada em como faço isso!
O JavaScript
Não há muito a dizer sobre o state apenas algumas propriedades:
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;
}
// ....
}
O senhor provavelmente pode perceber que ou data ou error terá dados, o outro será null, portanto, estou basicamente redefinindo o valor do estado original e, em seguida, preenchendo data ou error. Para fazer isso, criei um resetStateWithUpdates que tem a seguinte aparência:
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 });
}
E é usado como:
// 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 });
Usando o para mesclar o estado padrão e as informações de estado atualizadas salvam várias renderizações de vários setState chamadas. O código também é muito curto!
Cada um tem sua própria maneira de lidar com o estado em seus aplicativos React, portanto, não estou afirmando que esse seja o melhor método para redefinir o estado com uma pequena atualização, mas ele funciona maravilhosamente bem para mim. O código é curto, descritivo e reutilizável!
