javascript - Action 分派(dispatch)后渲染组件

Question

页面加载后，我将在我的 index.js 中调度一个操作 store.dispatch(getWeatherReports()); 来访问天气 API。此操作通过 redux 过程，最终将返回的数据添加到名为 weatherReports 的状态属性中。此属性是一个具有空数组的对象。现在，我将粘贴代码的概述。并不是所有的代码都是为了省去一行一行的麻烦，因为从 API 输出数据不是我遇到的问题。

这是我的 index.js:

import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import configureStore from './store/configureStore';
import {Provider} from 'react-redux';
import {Router, browserHistory} from 'react-router';
import {StyleRoot} from 'radium';
import routes from './routes';
import {loadBlogs} from './actions/blogActions';
import {loadUsers, getActiveUser} from './actions/userActions';
import {getWeatherReports} from './actions/weatherActions';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/toastr/build/toastr.min.css';
import './styles/app.scss';

const store = configureStore();
store.dispatch(loadBlogs());
store.dispatch(loadUsers());
store.dispatch(getActiveUser());
store.dispatch(getWeatherReports());

render(
  <StyleRoot>
    <Provider store={store}>
      <Router history={browserHistory} routes={routes}/>
    </Provider>
  </StyleRoot>,
  document.getElementById('app')
);

相信这会通过正确的流程返回数据。然后，我创建了一个 smart 组件，它采用此状态并将其传递给一个dumb组件。

class DashboardPage extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      weatherReports: []
    };

  }

  <ContentBox
    title="What The Wind Blew In"
    content={<WeatherReport reports={this.props.weatherReports} />
  />

同样，请相信我有适当的 mapStateToProps、mapDispatchToProps 等。然后我希望在 dumb 组件中显示数据。 WeatherReport.js:

import React, {PropTypes} from 'react';
import styles from '../common/contentBoxStyles';

const WeatherReport = ({reports}) => {
    console.log(reports);
    return (
        <div style={styles.body} className="row">
            <div style={styles.weatherBoxContainer}>
                <div className="col-sm-2 col-md-offset-1" style={styles.weatherBoxContainer.weatherCard}>
                    <div style={styles.weatherBoxContainer.weatherReport}>
                        <div style={styles.weatherBoxContainer.currentTemp}>
                            HERE IS MY PROBLEM!!
                            {reports[0].main.temp}
                        </div>
                    </div>
                    CA
                </div>
                <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
                    <div style={styles.weatherBoxContainer.weatherReport}>
                        Report
                    </div>
                    UT
                </div>
                <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
                    <div style={styles.weatherBoxContainer.weatherReport}>
                        Report
                    </div>
                    MN
                </div>
                <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
                    <div style={styles.weatherBoxContainer.weatherReport}>
                        Report
                    </div>
                    DC
                </div>
                <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
                    <div style={styles.weatherBoxContainer.weatherReport}>
                        Report
                    </div>
                    NY
                </div>
            </div>
        </div>
    );
};

WeatherReport.propTypes = {
    reports: PropTypes.array
};

export default WeatherReport;

我的根本问题是，在我的调度操作返回数据之前。我试图通过我的 dumb 组件呈现它。因此，我在尝试访问数据时收到以下错误:Uncaught TypeError: Cannot read property 'main' of undefined(…) when doing the following: reports[0].main.temp 发生的事情是阻止我的应用程序继续前进，这样 store.dispatch(getWeatherReports()); 永远不会被调用。因此，如果我从等式中删除 {reports[0].main.temp}，那么该过程将继续并分派(dispatch)操作。然后我可以调用带有 HMR 和万岁的方程式!数据在那里...

所以我的问题是，感谢您的耐心等待，我怎样才能得到它，以便我的dumb组件等待尝试访问状态上的这些属性，直到我的初始调度操作发生之后？

Answer 1

如果 getWeatherReports 请求是由支持 promise 而不是回调来通知您成功响应的东西发出的(即像 axios )，那么您可以尝试使用像 redux-promise< 这样的中间件/strong>.

redux-promise 将做的是拦截调度操作，并在 promise 尚未解决时停止将操作转发给商店的订阅者。

一旦您获得成功的响应并且 promise 得到解决，中间件就会创建一个新的操作，其操作类型与原始操作相同，但其有效负载包含您需要的数据。

您可以按如下方式使用它:

import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise'; 

const store = configureStore();
store.dispatch(loadBlogs());
...
...
store.dispatch(getWeatherReports());

const storeWithMiddleWare = applyMiddleware(promise)(store);