javascript - React 加载 Spinner + Redux？

Question

UploadImage 组件是一个dumb组件。它获取 redux 操作来调用上传，并获取图像文件路径，一旦图像上传，该操作就会将该路径放入适当的 reducer 中。这里它与两个 Prop 一起使用:

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

我的newArticleBuffer-reducer有image: null，上传完成后它将获取图像的路径。发生这种情况时，我的组件会使用react，不再显示微调器。

在内部，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>
    );
  }
}

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

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

Answer 1

首先，将 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
        }
    };
};

然后在您的 reducer 中，只需处理更新存储的操作。

这样，每当我们收到服务器的响应或图片上传过程中发生错误时，isLoading 就会被设置为 false。