React-Redux를 사용하여 루프에서 여러 구성 요소를 처리하는 방법

Question

간단한 반응식 응용 프로그램에서 작업하고 있습니다. 사용자 유형에 따라 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을 사용하여 새 항목을 렌더링합니다.

문제는 데이터베이스에서 파일을 처리하는 방법보다 파일을 업로드하는 방법에 더 있습니다.

각 파일에서 사용자가 그림을 선택했는지 여부와 그림이 데이터베이스에 제출 중인지 여부를 확인하기 위해 부울을 설정하려고합니다.

그래서 내 행동은 지금과 같이이 잘 작동하고 내 행동이 파견되고하지만 지금 나는 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])); 
    } 
} 

. 하지만이 파일은 여러 번 (사용자 유형에 따라 2 또는 5) 호출 될 것입니다.이 논리는이 파일에있을 수 없습니다.

내가 정말 알고 싶은 것은 내 용기에 내 모든 값을 설정해야하는 경우, 즉 같은 것을 작성하는 의미이다 : 나는 5이있는 경우

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

export default connect(mapStateToProps)(KycItem); 

그래서이 한 항목입니다을, 나는 이것을 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을 분할해야 컨테이너 동안

// 컨테이너

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 

가 : 모든 데이터를 바인딩 로직을 처리합니다

또한 업로드 처리기 및 디스패처를 추가해야합니다.