访问redux存储以获取数据流

Question

当用户根据上传进度上传PSD文件时，我试图显示一个加载栏。

示例：

文件开始上传且商店正在相应更新时，我正在调度操作。

Pipenv

这是商店更新：

但是我无法从组件内部的商店获得 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状态。

如何在组件内部更新存储时访问存储中的数据流？

Answer 1

如果您使用的是react-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);