J'ai actuellement une action Redux qui ressemble à ceci:
{
type: 'user/updateRequested',
payload: {name: 'Foo', avatar: File}
}
ce fichier n'est pas sérialisable, donc je me demande s'il existe un meilleur moyen.
Lorsque l'action est envoyée, trois choses se produisent:
state.user.name mais ignore l' avatarstate.user.avatar à jour de state.user.avatar )Je ne stocke jamais l'objet File dans le magasin, c'est uniquement dans les actions.
Existe-t-il un meilleur moyen ou s'agit-il d'un cas d'utilisation où les actions non sérialisables sont valides?
3 Réponses :
Le fichier est sérialisable en théorie (base64 par exemple) mais cela rendrait probablement l'utilisation des outils de développement plus difficile ou provoquerait d'autres effets secondaires inattendus avec autant de données.
Je reconnais qu'il est valide de ne pas stocker le contenu réel du fichier dans les charges utiles d'action.
Vous pouvez enregistrer un hachage du fichier (ou simplement le nom et un horodatage) et l'utiliser comme clé pour accéder au fichier dans un autre type de stockage s'il devient nécessaire d'avoir le contenu. Cela permettrait au voyage dans le temps de fonctionner à nouveau, mais uniquement si les actions sont rejouées dans le même environnement où le contenu du fichier est accessible.
J'ai fait face au même problème. C'est ainsi que j'avais configuré mon magasin.
export default configureStore({
reducer: {
vehicles: vehicleReducer,
},
middleware: [...getDefaultMiddleware(), apiMiddleware],
});
Une fois que je me suis débarrassé de getDefaultMiddleware , l'erreur a disparu pour moi.
Cela supprimera en effet les avertissements et les erreurs du journal. Mais, c'est simplement ignorer le problème. En supprimant les middlewares par défaut, vous supprimez les middlewares thunk ou, en production, les middlewares immutableCheck et serializableCheck. Ces deux vérifient les données entrant dans les actions et l'état de redux. En supprimant le middleware serializableCheck, les avertissements et les erreurs disparaissent.
export default configureStore({
reducer: {
\\Put your reducers here
},
middleware:getDefaultMiddleware({
\\this way you don't remove the middlewares
serializableCheck:false,
}),
});
J'utilise la même approche donc je pense que c'est bien (car je n'ai pas trouvé de meilleure solution).
Juste par intérêt, effectuez-vous une compression sur le fichier?
@MattSugden Non, c'est directement depuis un
<input>-myInput.files[0]sagas lit / télécharge ce fichier à partir de l'actionJe demandais, car je viens de faire quelque chose de similaire, et lorsque vous prenez une photo sur un iPhone, l'image fait environ 4 Mo, ce qui est beaucoup à télécharger et à télécharger.