Question

我有一个数据结构，其中事件有一个场所。我有单独的动作来获取数据，但在某些情况下，我需要两者都正确地渲染组件。

我不认为getEvents操作也应该获取场地数据，但我不确定是否应该将它们分组到容器或组件级别，以及等待它们的最佳方法是什么两者都完成了。

我刚开始使用React和Redux，所以任何帮助都会非常感激。谢谢！

容器：

import { connect } from 'react-redux';

import { getEvents } from '../actions/getEvents';
import { getVenues } from '../actions/getVenues';
import Events from '../components/Events';

function mapStateToProps(state) {
  return {
    events: state.events,
    venues: state.venues
  };
}

function mapDispatchToProps(dispatch) {
  return {
    onGetEvents: () => dispatch(getEvents()),
    onGetVenues: () => dispatch(getVenues()),
  };
}

const EventsContainer = connect(mapStateToProps, mapDispatchToProps)(Events);

export default EventsContainer;

组件：

import React from 'react';

import { Text, View } from 'react-native';

export default class Events extends React.Component {
  componentWillMount() {
    this.props.onGetEvents();
    this.props.onGetVenues();
  }

  render() {
    const events = [];

    for (let key in this.props.events.data) {
      events.push(this.props.events.data[key]);
    }

    return (
      <View>
        {events.map(event => { return <Text>{ event.name }, [get venue name]</Text>; })}
      </View>
    );
  }
}

Answer 1

我最终处理这个问题的方法是在操作中添加loading属性，然后在渲染组件之前等待它。

import React from 'react';

import { Text, View } from 'react-native';

export default class Events extends React.Component {
  componentWillMount() {
    this.props.onGetEvents();
    this.props.onGetVenues();
  }

  render() {
    if (this.props.events.loading || this.props.venues.loading) {
      return null;
    }

    const events = [];

    for (let key in this.props.events.data) {
      events.push(this.props.events.data[key]);
    }

    return (
      <View>
        {events.map(event => { return <Text>{ event.name }, [get venue name]</Text>; })}
      </View>
    );
  }
}

Redux等待多次调度

1 个答案: