Реакция загрузки Spinner + Redux?

Question

Компонент UploadImage является немым компонентом.Он получает действие приставки, которое нужно вызвать для загрузки, и получает путь к файлу изображения, который это действие помещает в соответствующий редуктор, как только изображение поднято.Здесь он используется с обоими реквизитами:

<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

Сначала подключите компонент UploadImage к хранилищу редуксов.

Затем создайте некоторые действия в своем файле действий:

// 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
        }
    };
};

Затем в своем редукторе просто обработайте действия для обновления.the store.

Таким образом, isLoading будет установлен в false, когда мы получим ответ от сервера, или возникнет ошибка во время загрузки изображения.

Answer 2

Что у меня есть, так это то, что в Redux у меня есть PageState объект с различными общими свойствами, одним из которых является isProcessing.При каждом вызове ajax другое свойство, называемое processingCount, увеличивается, а затем isProcessing устанавливается на processingCount > 0;

Всякий раз, когда запрос ajax завершается или завершается неудачей, свойство processingCount имеет значениеуменьшено.

Ваш PageState объект может затем использоваться в компоненте Spinner, может быть присоединен к кнопкам, чтобы прекратить отключать их во время обработки, или вы можете показывать различные анимации загрузки по всему приложению.

Итак, в вашем коде я удалил бы все состояние компонента и переместил бы это в ваше хранилище Redux.