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，并且在组件中我通过执行一个map迭代docs数组，然后为每个doc我渲染一个新项目，让＆＃39 ; s说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，而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

此外，您还需要添加上传处理程序和调度程序

如何使用React-Redux处理循环中的多个组件

1 个答案: