Question

UploadImage组件是一个愚蠢的组件。它获取要上载的redux动作，并获取一旦图像生成后该动作将其放入适当的reducer中的图像文件路径。在这里，它与两个道具一起使用：

<UploadImage onUpload={this.props.uploadNewArticleImage} image={this.props.newArticleBuffer.image}/>

我的newArticleBuffer缩减者拥有image: null，上传完成后，它将获得图像的路径。发生这种情况时，我的组件会做出反应，不再显示微调器。

在内部，UploadImage看起来像这样：

import React, { Component } from 'react';

export default class UploadImage extends Component {
  constructor(props) {
    super(props);

    this.state = { file: "", loading: false};

    this.onSubmit = this.onSubmit.bind(this);
    this.onFileChange = this.onFileChange.bind(this);    
  }

  onSubmit(e) {
    e.preventDefault();
    this.setState({loading: true});
    this.props.onUpload(this.state.file);
  }

  onFileChange(event) {
    this.setState({ file: event.target.files[0]});
  }

  render() {    
    let spinner = <div>Not Loading</div>
    if(this.props.image == null && this.state.loading) {
      spinner = <div>Loading</div>;
    }

    return (
      <div>Image Upload Component
      <input 
        type="file" 
        accept="image/*"
        onChange={this.onFileChange} />

      {spinner}
       <button onClick={(e) => this.onSubmit(e)}>Upload Image</button>
      </div>
    );
  }
}

有一些问题。首先，我从未将“加载”设置回false：Redux操作完成后，我需要以某种方式执行此操作，但是我不知道该如何执行。

第二，更重要的是，当用户上传图像时，此方法将不起作用，但随后决定上传其他文件。 image将不再是null。

Answer 1

我所拥有的是，在Redux中，我有一个PageState对象，该对象具有各种共享属性，其中之一是isProcessing。每当有ajax调用时，称为processingCount的另一个属性就会递增，然后将isProcessing设置为processingCount > 0;

每当ajax请求完成或失败时，processingCount属性都会递减。

然后，您的PageState对象可以在Spinner组件中使用，可以附加到Buttons上，以在正在进行处理时停止禁用它们，或者可以在整个应用程序中显示各种加载动画。

因此，在您的代码中，我将删除所有组件状态，并将其移至您的Redux存储中。

Answer 2

首先，将UploadImage组件连接到redux存储。

然后，在操作文件中创建一些操作：

// You only need to export and call this action from your component:
export const uploadNewArticleImage = (uploadData) => {
    return (dispatch) => {
        dispatch(uploadNewArticleImageLoading(true));   // set isLoading = true

        fetch('uploadData.url', {
            method: 'POST',
            body: uploadData.data,
            etc...
        })
            .then((response) => dispatch(uploadNewArticleImageLoading(false)))  // response received
            .then((response) => response.JSON())
            .then((jsonObj) => dispatch(uploadNewArticleImageSuccess(jsonObj.image))) // success
            .catch((error) => dispatch(uploadNewArticleImageLoading(false));          // error
    };
};

const uploadNewArticleImageLoading = (isLoading) => {
    return {
        type: "UPLOAD_NEW_ARTICLE_IMAGE_LOADING",
        payload: {
            isLoading: isLoading
        }
    };
};

const uploadNewArticleImageSuccess = (image) => {
    return {
        type: "UPLOAD_NEW_ARTICLE_IMAGE_SUCCESS",
        payload: {
            image: image
        }
    };
};

然后在减速器中，只需执行更新商店的操作即可。

这样，只要我们收到服务器的响应，或者在图像上传过程中发生错误，isLoading就会设置为false。

反应加载微调器+ Redux？

2 个答案: