Доступ к избыточному хранилищу для получения потока данных

Question

Я пытаюсь показать полосу загрузки, когда пользователь загружает PSD-файл на основе процесса загрузки.

Пример:

Я отправляюдействие, когда файл начинает загрузку и магазин обновляется соответствующим образом.

  const postFormData = ({ url, data, files }) =>
    new Promise((resolve, reject) => {
    store.dispatch({ type: START_FILE_UPLOAD });

    const formData = new FormData();
    Object.keys(data).forEach(key => formData.set(key, data[key]));
    Object.keys(files)
      .map((key) => {
        const { file, filename } = files[key];
        return { key, file, filename };
      })
      .forEach(({ key, file, filename }) => formData.set(key, file, filename));

    const request = new XMLHttpRequest();

    request.open('POST', url);
    request.upload.addEventListener('progress', ({ lengthComputable, loaded, total }) => {
      if (lengthComputable) {
        const feedData = { loaded, total };
        store.dispatch({ type: START_FILE_UPLOAD, payload: feedData });
      }
    });
    request.addEventListener('load', (event) => {
      store.dispatch({ type: END_FILE_UPLOAD });
      resolve(event);
    });
    request.addEventListener('error', (event) => {
      store.dispatch({ type: END_FILE_UPLOAD });
      reject(event);
    });
    request.send(formData);
  });

Вот обновление магазина:

НоЯ не могу получить состояние loaded & loading из хранилища внутри компонента.

Как получить доступ к потоку данных из хранилища по мере его обновления внутри компонента?

Answer 1

Если вы используете act-redux , используйте метод connect для подключения вашего компонента к магазину

import { connect } from 'react-redux'

class Sample extends Component {
  render() {
    return (
      <div>{this.props.loading}: {this.props.loaded}</div>
    );
  }
}

const mapStateToProps = state => ({
  loading: state.creations.loading,
  loaded: state.creations.loaded,
});

export default connect(mapStateToProps)(Sample);