Redux 等待多个分派答案

【问题标题】：Redux wait for multiple dispatchesRedux 等待多个分派
【发布时间】：2017-08-18 20:37:51
【问题描述】：

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

我不认为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>
    );
  }
}

【问题讨论】：

你用redux-thunk标记了这个，所以大概你正在使用它？你能发布你的动作吗？ thunk 将是放置此逻辑的好地方
你能分享你的仓库供我们测试吗？
@ken4z 我不想在getEvents 中复制我的getVenues 数据库调用。

标签： react-native redux react-redux redux-thunk

【解决方案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>
    );
  }
}

【讨论】：