Wie man mehrere Komponenten in einer Schleife mit React-Redux behandelt

Question

Ich arbeite an einer einfachen Reaktion-Redux-Anwendung. Und ich brauche meinen Benutzer, um 2 oder 5 Dateien hochzuladen (abhängig vom Benutzertyp). Nehmen wir an, er kann entweder ein einfacher Benutzer oder ein Administrator sein, der Benutzer muss 2 Dateien hochladen und einen Admin 5. Ich benutze React-Dropzone um meine Dateien hochzuladen

Von meiner Datenbank bekomme ich ein Objekt mit einem Array von Objekten , gibt es so etwas wie:

user: { 
    name: "John Doe", 
    docs: [ 
    { 
     url: "http://path-to-image.png" 
    }, 
    { 
     url: "http://path-to-image2.png" 
    } 
    ] 
} 

zu vereinfachen, in meiner Anwendung habe ich eine Container.js, ein Component.js, und in der Komponente i in dem docs Array iterieren durch eine Karte zu tun, und dann für jeden doc rendere ich ein neues Element, sagen wir FileItem.

Das Problem besteht eher darin, die Dateien hochzuladen, als mit den Dateien aus der Datenbank umzugehen.

Auf jeder Datei möchte ich einige Booleans setzen, um zu wissen, ob der Benutzer ein Bild ausgewählt hat und ob das Bild an die Datenbank übermittelt.

So sehen meine Aktionen wie diese für jetzt:

function changePictureA(picture){ 
    return { 
     type: ADD_PICTURE_A, 
     picture: picture, 
     isPictureChanged: true, 
     isPictureSubmitting: false 
    } 
} 

export function changeFirstPicture(file){ 
    return function(dispatch){ 
     dispatch(changePictureA(file[0])); 
    } 
} 

Diese gut funktioniert und ich kann meine Handlung versendungs ​​aber jetzt habe ich festgelegt, diese Logik in der FileItem Komponente. Aber wie diese Datei wird mehrmals (2 oder 5 nach Benutzer-Typ) aufgerufen, kann diese Logik nicht in dieser Datei richtig sein?

Was ich möchte wirklich wissen, ist, wenn ich in meinem Container alle meine Werte setzen haben, das bedeutet, etwas zu schreiben:

function mapStateToProps(state){ 
    const { picture,isPictureChanged, isPictureSubmitting} = state.pictureAReducer; 
    return { 
     picture, 
     isPictureChanged, 
     isPictureSubmitting 
    } 
} 

export default connect(mapStateToProps)(KycItem); 

So ist dies für ein Item, wenn ich 5 haben, Ich muss es 5 mal machen und dafür 5 Reduzierungen haben? Ist das die beste Lösung? Ich meine, ich werde lange Namensvariablen setzen müssen, wie Sie sehen können, während ich lieber nur isSubmitting, isChanged hätte.

Ich hoffe, Ihre Antworten werden mir helfen!

Answer 1

Dies passt perfekt in redux todo list sample. Anstelle von Reduzierungen und Kontrollen für jedes einzelnes Bild erstellen, können Sie einfach hinzufügen ID, um das Bild und verwenden allgemeine Maßnahmen:

function changePictureAction(id, picture){ 
    return { 
     type: ADD_PICTURE, 
     id: id, 
     picture: picture, 
     isPictureChanged: true, 
     isPictureSubmitting: false 
    } 
} 

export function changePicture(id, file){ 
    return function(dispatch){ 
     dispatch(changePictureAction(id, file[id])); 
    } 
} 

Dann brauchen Sie Presentation and Container, auf der Präsentation teilen Sie FileItem und FileItemsList haben müssen, während Container behandelt alle Datenbindung Logik:

// Container

import changePicture from './PictureActions' 
import FileItemsList from './FileItemsList' 

function mapStateToProps(state) { 
    return { 
     pictures: state.pictures 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { changePicture } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(FileItemsList); 

// FileItemsList.js

const FileItemsList = ({pictures, changePicture}) => { 
    const fileitems = pictures.map(pic => 
    <FileItem key={pic.id} picture={pic.picture} 
       onChange={(picture)=>changePicture(pic.id, picture)}/>) 

    return <div>{fileitems}</div> 
} 

export default FileItemsList 

Auch müssen Sie Upload-Handler und Dispatcher

hinzufügen