Quelles sont vos bonnes pratiques pour le préchargement initialState dans votre Redux apps?
Je ne suis pas heureux avec les hacks, je suis venu avec l'aide de Flux, et maintenant Redux pour le remplissage de initialState dans mon magasin.
J'ai toujours envoyer une charge utile de JSON vers le bas avec le chargement initial de la page. Universel JavaScript n'est pas une option dans certaines de mes applications car ils ne sont pas tous soutenus par le Nœud. Je voudrais mettre l'accent sur les "meilleures pratiques" et des modèles autour de la façon dont les données sont préchargés sur le client. Puis, je sens que la migration vers le serveur est trivial.
Voici un résumé de ce que je suis en train de faire le travail, et dans quelques autres jouets apps à l'aide de Redux:
https://gist.github.com/kevinold/5767bb334472b7e2bfe3
Pour résumer:
- Je suis l'envoi de variables globales en bas de la page
- Dans componentDidMount() je suis le dispatching des actions que “recevoir” et de manipuler les différents éléments de données. (Ces “recevoir” méthodes sont utilisées lors du traitement de ces bits de données lorsqu'ils sont récupérés asynchrone via une demande d'action, et je suis à la réutilisation d'ici, puisque j'ai déjà données.)
Cela fonctionne, et il n'y a pas toute les questions que nous sommes en cours d'exécution, mais il se sent comme un hack, je ne suis pas vraiment heureux avec. Aussi, j'ai l'impression que l'état initial de Redux n'est pas heureux avec moi de cette façon.
Selon http://rackt.org/redux/docs/recipes/ServerRendering.html et à la section “Côté Client”, je suis capable de passer initialState à mon magasin.
Voici un patch que j'ai pour un autre projet, je travaille avec (KeystoneJS). Je suis de passage il est Keystone objet dans le initialState:
Tout qui fonctionne, comme vous pouvez le voir, je suis obligé de s'adapter à la forme de la sortie de l'ensemble de mon combinedReducers (https://github.com/kevinold/keystone/commit/6f80c2f6f1e5c081361369a8bb31b75f1e62460f#diff-b4b498ca92c4d05e050b45c725c26f9d) ou j'aurai la console de mises en garde, etc.
Je suis peut-être très paresseux à traiter avec cela, mais en essayant de limiter la mise à jour d'un autre morceau de données lorsque je ajouter/changer quoi que ce soit liés à des réducteurs (ajouter un réducteur, la façon dont ils sont composés, etc.).
J'ai réalisé que je pourrais avoir à faire à la initialState dans les réducteurs correctement.
Je suis en train de digérer comment (https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/client.js#L25) gère son initialState.
J'apprécierais vraiment que certains des commentaires sur "le meilleur" et le "monde réel" des pratiques qui travaillent pour les autres.
- Je vais voter pour fermer cette question hors-sujet parce que c'est un document en question, mais appartient à codereview
Vous devez vous connecter pour publier un commentaire.
Je ne pas bien comprendre la question, mais je vais essayer de mon mieux pour répondre.
C'est un mauvais endroit pour les expédier. Si vous choisissez d'expédition des actions au lieu de prodiving état initial directement, le faire avant de rendre. En d'autres termes, le faire juste après la création de la boutique! De cette façon, vous n'avez pas rendu le vide de l'état.
Vous n'êtes pas censé créer le
initialState
objet manuellement. Vous êtes censé créer un Redux de stocker sur le serveur,dispatch
les actions menées pour pré-remplir avec des données, et quand il est prêt, appelezstore.getState()
pour récupérer l'état que vous souhaitez transmettre à la client. Sur le client, vous souhaitez consulter à partir d'une variable globale, et de créer le client instance de la banque avec elle. En d'autres termes, vous ne jamais avoir à créer manuellementinitialState
—vous êtes censé saisir sur le serveur avecstore.getState()
, le faire passer pour le client, et de créer un magasin avec elle.Donc je ne comprends pas le problème que vous décrivez. Si votre réducteur de noms ou de nidification des changements, il va changer sur le serveur. Il n'y a rien que vous devez faire pour “réparer”—si vous utilisez Redux à la fois sur le client et le serveur, leur structure de l'etat sera à la hauteur.
Si vous utilisez Redux sur le serveur, pré-remplir la stocker comme décrit ci-dessus, et de passer de son état vers le bas pour le client. Dans ce cas, vous devez utiliser le
initialState
argument decreateStore()
.Si vous n'utilisez pas Redux sur le serveur mais vous voulez pour pré-remplir les données de toute façon (par exemple, peut-être que vous utilisez quelque chose d'autre que le Nœud), l'approche avec le centre de télésurveillance actions est votre prochain meilleur pari, car il n'a pas besoin de votre backend de connaître l'état de forme. Dans ce cas, vous devez transmettre ces actions sous forme de JSON pour le client, et
dispatch()
tous juste après le magasin est créé.initialState
de la population à une optimisation. L'application doit être en mesure de démarrer sans cela, à mon avis. Et de la route des arguments de changement de sorte que vous aurez envie d'un peu de code pour aller chercher des trucs sur la changer de toute façon.