J'ai une application réagissante qui utilise Redux pour la gestion de l'État. La structure initiale du magasin est la suivante: à un moment donné mon visitorrecords strong> devient quelque chose de similaire à celui-ci: p> Ce que je veux faire dans mon réducteur consiste à mettre à jour un enregistrement spécifique de son identifiant. J'ai l'identifiant et les valeurs des champs d'édition provenant de mon action, mais je ne sais pas comment les gérer à la suite des meilleures pratiques de mise à jour. P> C'est ce que mon réducteur ressemble à: P > export default (state = initialState, action) => {
switch (action.type) {
case ON_VISITOR_RECORDS_FETCHED:
return state.merge({
visitorRecords: fromJS(action.visitorRecords),
});
case ON_RETURN_APPROVED:
return state.merge({
approvedBookingId: action.approvedBookingId,
});
case ON_VISITOR_RECORD_UPDATED:
console.log(JSON.stringify(state.get("visitorRecords")));
// console.log('action.bookingBeingUpdated: ' + action.bookingBeingUpdated)
// console.log('JSON.stringify(action.updatedTextFields)' + JSON.stringify(action.updatedTextFields))
// console.log('updatedExpectedArrival: ' + action.updatedExpectedArrival)
// console.log('updatedExpectedDeparture: ' + action.updatedExpectedDeparture)
// console.log('updatedStatus: ' + action.updatedStatus)
return state;
default:
return state;
}
};
5 Réponses :
Vous pouvez mettre à jour votre enregistrement quelque chose comme ceci:
case ON_VISITOR_RECORD_UPDATED:
return {
...state,
visitorRecords: state.visitorRecords.map(record => {
if(record.id.toString===action.bookingBeingUpdated.toString()){
return {
...record,
updatedExpectedArrival: action.updatedExpectedArrival,
updatedExpectedDeparture: action.updatedExpectedDeparture,
updatedStatus: action.updatedStatus
}
} else {
return record
}
})
}
Je reçois une erreur avec la fonction .map. "Impossible de lire la propriété" de la carte "de non définie" peut-être parce que "Fromjs" génère du type de contenu étrange.
Je pense que je suis confronté à ce problème: Stackoverflow.com/Questtions/43716784/...
la meilleure pratique consiste à réellement Disons que vous envoyez une action et une charge utile comprend l'ID et les nouvelles valeurs que vous souhaitez utiliser: maintenant dans votre réducteur: ceci vous garantit avoir une toute nouvelle valeur d'état pour votre réducteur mappe () l'état existant et à renvoyer un nouveau qui inclut les valeurs d'élément mis à jour que vous désirez.
Vous utiliseriez généralement mapper code> sur votre tableau de VisTorrecords et transmettez l'ID et les champs à mettre à jour dans l'action, donc par exemple, cela ressemblerait à ceci: case ON_VISITOR_RECORD_UPDATED:
console.log(JSON.stringify(state.get("visitorRecords")));
const updatedRecords = state.visitorRecords.map(record => {
if (record.id === action.bookingBeingUpdated) {
return new Map({
...record,
expectedArrival: action.updatedExpectedArrival
// other fields...
});
}
return record;
});
return state.merge({
state,
fromJS({visitorRecords: updatedRecords})
});
Qu'en est-il de la ligne HT 3D de votre suggestion? N'est-ce pas censé être l'état.Visitorrecords ou quelque chose? Je l'ai essayé de cette façon, mais cela ne fonctionne pas. Je reçois "Impossible de lire la carte" de Undefined '
Il va dans UpdatedatedsRecords qui remplace visitorrecords propriété dans l'objet State retourné. Vous pouvez évidemment le faire, il est divisé pour le rendre un peu plus facile à lire.
Désolé, mis à jour. Aurait dû être state.visitorrecords
Même mis à jour, je pense qu'il y a un problème avec la ré-affectation. Une fois que le nouvel état est retourné, chaque seconde mise à jour échoue car le type du conteneur d'état change (de la carte à un objet. Comme décrit ici ici Stackoverflow.com/questions/43716784/... )
N'avait pas remarqué que vous utilisez immuable. Oui, il aura besoin d'un fromjs
Ouais moi aussi. Je pense que je l'ai presque fait, à quoi il est laissé, c'est de retourner une carte au lieu de l'objet anonyme sur la ligne 5 de votre code. Une idée?
Vous pouvez simplement faire nouvelle carte ({// objet Table des objets}) , je vais mettre à jour. J'envisageais vraiment d'utiliser des objets simples
Sur la ligne 5, j'obtiens: TypeError: L'objet n'est pas ibler (impossible de lire le symbole de la propriété (symbole.itéator))
Voici comment vous allez utiliser
Je pense que votre suggestion est assez proche mais ne fonctionne toujours pas. Je devais écrire de l'état.fricing comme ceci: retour State.frice ({visitorrecords: fromjs (NewRecordscollection)}); parce que cela ne compile pas. Sauf pour cela, il ne passera jamais à l'intérieur du «si» car le type des éléments est la carte
Désolé, ignoré que fromjs est une conversion profonde. Donc, mis à jour le si condition et interne de celui-ci aussi. Corrigé le state.mmerge pour refléter la fusion de l'état lui-même plutôt que l'opération de fusion indépendante fusion (état, nouveautacte) que j'ai supposé en taper dans une hâte.
J'accepterai cela comme une réponse, mais veuillez mettre à jour votre 'Get's avec: record.get (' ID ') et State.get ("visitorrecords") sur la ligne 2
Oui. 'ID' n'est pas un champ calculé ici. Mettra à jour. Bon travail d'équipe😄!
Please don't use state.merge you can use
```return {
...state,
visitorRecords: [...state.visitorRecords,action.visitorRecords]
}```
Please send Id from action after and compare this id in ON_VISITOR_RECORD_UPDATED type like
```visitorRecords: {
...state.visitorRecords,
data: state.visitorRecords.data.map((items) => {
if (items.id=== action.id) {
return { ...items, name: "updated name" };
}
return items;
})
}```