Réagir-redux stocker les mises à jour mais ne Réagissent pas
Ours avec moi, ici, que cette question se rapporte à mon premier essai d'application à l'aide de Réagir, Redux ou réagissent-redux. Les Docs m'ont acquis beaucoup et j'ai simulé une application de services bancaires que la plupart des œuvres. Mon état d'objet ressemble à peu près comme ceci:
{
activePageId: "checking",
accounts: [
checking: {
balance: 123,
transactions: [
{date, amount, description, balance}
]
}
]
}
J'ai juste deux actions:
1. CHANGE_HASH (comme dans l'url de hachage). Cette action fonctionne toujours comme prévu et tout le réducteur n'est mise à jour de l'état.activePageId (oui, je suis le clonage de l'état de l'objet et de ne pas le modifier). Après l'action, je peux voir l'état a changé dans le Redux magasin et je peux voir que Réagir a mis à jour.
function changeHash(id) {
return {
type: "CHANGE_HASH",
id: id
}
}
2. ADD_TRANSACTION (formulaire de soumission). Cette action ne jamais les mises à jour de Réagir, mais il y a toujours des mises à jour de la Redux magasin. Le réducteur de cette action est la mise à jour de l'état.comptes[0].l'équilibre et c'est l'ajout d'un objet de la transaction à la matrice de l'état.comptes[0].des transactions. Je ne reçois pas toutes les erreurs, de Réagir n'a tout simplement pas de mise à jour. CEPENDANT, si je l'envoi d'une CHANGE_HASH action Réagir rattraper et l'affichage de toutes les ADD_TRANSACTION état des mises à jour correctement.
fonction addTransaction(transaction, de l'équilibre, compte) {
de retour {
type: "ADD_TRANSACTION",
charge utile: {
transaction: transaction,
l'équilibre: l'équilibre, la
compte:
}
}
}
Mon réducteur...
function bankApp(state, action) {
switch(action.type) {
case "CHANGE_HASH":
return Object.assign({}, state, {
activePageId: action.id
});
case "ADD_TRANSACTION":
//get a ref to the account
for (var i = 0; i < state.accounts.length; i++) {
if (state.accounts[i].name == action.payload.account) {
var accountIndex = i;
break;
}
}
//is something wrong?
if (accountIndex == undefined) {
console.error("could not determine account for transaction");
return state;
}
//clone the state
var newState = Object.assign({}, state);
//add the new transaction
newState.accounts[accountIndex].transactions.unshift(action.payload.transaction);
//update account balance
newState.accounts[accountIndex].balance = action.payload.balance;
return newState;
default:
return state;
}
Mon mapStateToProps
function select(state) {
return state;
}
Ce qui me manque ici? J'ai l'impression que de Réagir est censé mettre à jour le Redux store est mis à jour.
Dépôt Github: https://github.com/curiousercreative/bankDemo
Déploiement: http://curiousercreative.com/demos/bankDemo/
p.s. J'ai menti à propos de ne pas avoir toutes les erreurs. J'ai un certain nombre d'avertissements", "Avertissement: Chaque enfant dans un tableau ou un itérateur doit avoir une "clé" prop... je suis déjà en leur donnant une touche prop mis à l'index. Je doute que n'a rien à voir avec mon problème bien que.
- Hmm, je pense que les deux choses vont vous aider à délimiter le bug: 1) utiliser les redux-enregistreur pour voir ce qui a changé, lorsque l'action se passe 2) postez votre réducteur, d'action et de mapStateToProps code.
- Malheureusement, je n'étais pas en mesure d'obtenir redux-enregistreur de travail, mais j'ai enregistré des choses sur mon propre et tout fonctionne comme attendu. Je vais mettre à jour la question qui se pose maintenant avec un réducteur, d'actions et de mapStateToProps.
- Comment Réagir déterminer si l'état a changé? Peut-être parce que le changement est assez profond dans l'état de l'objet et le changement est si petit qu'il n'est pas rendu? Comment réagissent-redux décider quand à la mise à jour de Réagir accessoires? Je viens d'être déconnecté de la valeur de l'état dans mapStateToProps et il est mis à jour il y a tout simplement pas à Réagir.
- Réagir Redux utilise un référentiel de contrôle d'égalité. Si vous la mutation de l'état, de ne pas voir les changements. Ne pas la mutation de l'état.
Vous devez vous connecter pour publier un commentaire.
Le problème est dans ce morceau de code:
Le clonage de l'objet de l'état ne signifie pas que vous pouvez muter les objets qu'il référence. Je vous suggère de lire plus au sujet de l'immutabilité, car ce n'est pas la façon dont il fonctionne.
Ce problème et la solution sont décrits en détail dans Redux “de Dépannage” docs donc je vous suggère de lire.
https://redux.js.org/troubleshooting
Je vous conseille aussi de prendre un coup d'oeil à la Carte d'Achats exemple dans le Flux de Comparaison pour Redux, car elle montre comment mettre à jour les objets imbriqués sans mutation dans une manière similaire à ce que vous demandez.
https://github.com/voronianski/flux-comparison/tree/master/redux