Mon problème est que j'essaie de créer un simulateur de trading de crypto-monnaie et j'ai besoin de quelques données factices qui se mettent à jour automatiquement pour pouvoir y accéder à partir de n'importe quel autre composant et garder une trace de toutes les données précédemment stockées afin que je puisse créer des graphiques etc. Comment auriez-vous une méthode toujours en cours d'exécution ou quelque chose de relatif à cela dans une classe qui peut renvoyer quelle que soit la valeur actuelle dans React? Par où commencerais-je? J'ai essayé de le programmer sur Firebase mais cela nécessite un abonnement à Google Cloud. C'est pourquoi je préférerais quelque chose de local.
Merci
3 Réponses :
Si vos données changent constamment et que vous souhaitez pouvoir accéder à toutes les données précédemment stockées, vous souhaiterez probablement conserver vos données dans un état global. Si vous souhaitez que divers composants puissent y accéder, vous pouvez utiliser quelque chose comme API React Context . Si vous voulez que les autres composants puissent communiquer avec l’état global ou communiquer entre eux, votre meilleur pari est Réagissez Redux . Ce sont des systèmes mondiaux de gestion des états. Ils ne sont pas simples à apprendre, surtout si vous êtes débutant. Mais ils valent la peine de prendre le temps d'apprendre et de maîtriser, car ils sont couramment utilisés dans la plupart des projets React du monde réel. Utilisez-vous déjà l'un de ces systèmes?
J'utilise déjà React Redux, mais je ne saurais pas comment l'implémenter
Il n'y a pas de magie ici: il s'agit encore d'un vieux JavaScript, alors ayez simplement chaque composant accroché au même objet et vous avez terminé. Si vous regroupez le code de nœud à l'aide de webpack, parce que vous utilisez create-react-app , cela ne pourrait pas être plus facile (enfin, d'accord, cela pourrait être, mais c'est joli easy):
créez un fichier comme use-this-everyone.js:
const React = require('react');
const mything = requjire('path/to/use-this-everyone.js');
class Blah extends React.Component {
constructor(props) {
super(props);
...
}
render() {
// boom, `mything` is the same thing for _everything_ that require'd it
}
}
puis dans chaque composant, importez ça:
const mything = {
// literally _anything_ you want synchronised goes here.
// properties, functions, class bindings, whatever you like.
};
modulde.exports = mything;
La raison pour laquelle cela fonctionne est que Node et Webpack mettent en cache les modules. En transformant cet objet unique en "un module", chaque chose qui nécessite s il obtiendra une référence au exactement le même objet et vous pourrez donc l'utiliser aussi rapidement et dispositif de synchronisation facile entre tous les composants.
Ok, cela semble assez raisonnable, mais est-ce que mything changerait continuellement les données même s'il n'est pas utilisé. Les données de mon truc seraient-elles dynamiques ou statiques. J'en ai besoin pour fonctionner en arrière-plan jusqu'à ce que j'aie besoin d'y accéder
Que signifie «non utilisé»? Encore une fois, c'est juste plus de javascript donc si vous avez besoin qu'il se mette constamment à jour par rapport à une source de données, par tous les moyens: faites-le faire. Arrêtez de penser à cela comme à quelque chose de spécial: c'est juste du code JS qui est chargé en mémoire mais auquel tout a un accès direct, à condition qu'ils en aient besoin. C'est exactement la même chose que var a = {}; b = {a: a}; c = {a: a}; : b et c ont tous deux accès à la même chose. Donnez à cet objet un une fonction addEventListener et faites-lui exécuter un fetch (...). Then (data => listeners.forEach) boucle, etc.
Vous dites que vous construisez un simulateur, donc en fonction de vos besoins, vous pouvez simplement regarder la DateTime actuelle et calculer des données factices lorsque vous y êtes invité. Exemple (ceci est représentatif et ne fonctionnera pas immédiatement):
const ledger = [];
function updateSimulatedData() {
ledger = [ ...ledger, { value: Math.random(), time: Date.now() } ];
setTimeout(updateSimulatedData, 1000);
}
updateSimulatedData();
export default ledger;
Si cela ne fonctionne pas pour vous, vous pouvez simplement demander à votre fonction de mettre à jour son propre état avec setTimeout .
const ledger = [
{ value: Math.random(), time: Date.now() }
];
function getSimulatedData() {
const lastRecord = ledger[ledger.length - 1];
const lastUpdated = lastRecord.time;
const now = Date.now();
// this could take a loooooong time to do. Don't do exactly this.
for (let i = lastUpdated; i < now; i += 1000) {
ledger = [ ...ledger, { value: Math.random(), time: i } ];
}
return ledger;
}
export default getSimulatedData;
Cette approche fonctionnera en fait en arrière-plan toutes les secondes.
Il n'y a pas de magie ici, le code React est toujours juste sur la page JavaScript, donc la réponse courte est "en important quelque chose qui pointe exactement vers le même objet dans chaque composant".
Je ne comprends pas très bien, pourriez-vous donner un exemple de code. Je pensais utiliser quelque chose comme un singleton qui peut être appelé à chaque fois mais je ne sais pas comment l'implémenter
créez-vous un bundle en utilisant webpack ou quelque chose?
Non, je n'utilise pas de webpack, juste React standard avec Redux et Firebase / Firestore
d'accord, mais "standard React" signifie create-react-app et autres, qui utilise webpack. Alors ... construisez-vous un bundle, ou faites-vous quelque chose de différent de 99,99% des gens? =)
Oh non, j'utilise certainement l'application create react. Je ne savais pas que c'était un webpack
Dans ce cas: cool, réponse écrite.