React-Reduxを使用してループ内の複数のコンポーネントを処理する方法

Question

私は単純なreact-reduxアプリケーションで作業しています。そして私は2〜5つのファイルをアップロードするユーザーが必要です（ユーザーの種類によって異なります）。彼は単純なユーザーまたは管理者のいずれかになるとしましょう、ユーザーは2ファイルと管理者をアップロードする必要があります5.私のファイルをアップロードするためにreact-dropzoneを使用します

私のデータベースからは、 、それはのようなものを返す：簡素化するために

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

、私のアプリケーションでは、私はContainer.js、Component.jsを持っており、コンポーネントに私はマップを実行して、その後、それぞれのドキュメントの配列で反復処理しますdoc私は新しいアイテムをレンダリングします、FileItemと言うことにしましょう。

問題は、データベースからファイルを処理する方法よりもファイルをアップロードする方法が多いことです。

各ファイルで、ユーザーが画像を選択したかどうか、画像がデータベースに送信されているかどうかを確認するために、いくつかのブール値を設定します。

だから私の行動は今のところ次のようになります。

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])); 
    } 
} 

これがうまく機能し、私は私のアクションがディスパッチされているが、今の私はFileItemコンポーネントでこのロジックを設定している見ることができます。しかし、このファイルのように複数回（ユーザーのタイプに応じて2つまたは5つ）呼ばれることになりますが、このロジックはこのファイルにはありません。

私はそれがこのような何かを書くことを意味し、私のコンテナにすべての私の値を設定する必要があれば私が本当に知りたいことはされています

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

export default connect(mapStateToProps)(KycItem); 

私は5を持っているのであれば、これは、一つの項目です私はそれを5回しなければならないでしょうし、これのために5人の減速機を持っていなければなりませんか？それが最善の解決策ですか？つまり、私はちょうどisSubmitting, isChangedが好きだったのに対し、あなたが見ることができるような長い名前の変数を設定する必要があります。

あなたの回答が私を助けてくれることを願っています！

Answer 1

これはredux todo list sampleに完全に当てはまります。あなただけの画像にIDを追加して、一般的なアクションを使用することができ、すべての独立した画像のための減速やコントロールを作成するのではなく：

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])); 
    } 
} 

コンテナながら、あなたは、あなたがFileItemとFileItemsListを持っている必要があり、プレゼンテーションで、Presentation and Containerを分割する必要がありますロジックを結合するすべてのデータを処理します。

// 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 

//コンテナ

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); 

また、アップロードハンドラとディスパッチャを追加する必要があります