Redux 等待多次调度

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 等待多次调度

Redux wait for multiple dispatches

react-native

redux

redux-thunk

react-redux