How to handle multiple components in a loop with React-Redux - reactjs

Question

I am working on a simple react-redux application. And I need my user to upload 2 or 5 files (depending on the user type). Let's say he can be either a simple user or an admin, the user has to upload 2 file and an admin 5. I use react-dropzone to upload my files
From my database I get an object with an array of object, it returns something like:
user: {
name: "John Doe",
docs: [
{
url: "http://path-to-image.png"
},
{
url: "http://path-to-image2.png"
}
]
}
To simplify, in my application I have a Container.js, a Component.js, and in the component i iterate in the docs array by doing a map, and then for each doc I render a new item, let's say FileItem.
The problem is more in the way to upload the files than how to handle the files from the database.
On each file I want to set some booleans in order to know if the user has chosen a picture and if the picture is submitting to the database.
So my actions look like this for now:
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]));
}
}
This works well and I can see my action being dispatched but for now I have set this logic in the FileItem component. But like this file is going to be called several times (2 or 5 according to user's type), this logic can't be in this file right ?
What I really want to know is if I have to set all my values in my container, that mean to write something like this :
function mapStateToProps(state){
const { picture,isPictureChanged, isPictureSubmitting} = state.pictureAReducer;
return {
picture,
isPictureChanged,
isPictureSubmitting
}
}
export default connect(mapStateToProps)(KycItem);
So this is for one Item, if I have 5, I will have to do it 5 times and to have 5 reducers just for this ? Is that the best solution ? I mean, I will have to set long name variables like you can see whereas I would have prefer to just have isSubmitting, isChanged.
I hope your answers will help me !

Answer 1

This perfectly fits into redux todo list sample. Instead of creating reducers and controls for every separate picture you can just add id to the picture and use general actions:
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]));
}
}
Then you need to split Presentation and Container, on the presentation you need to have FileItem and FileItemsList, while Container handles all data binding logic:
// 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
Also you will need to add upload handlers and dispatchers