React Native + Redux组件在存储操作完成之前呈现

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';

class MyComponent extends Component {
  render() {
    return (
      <View>
        <Text>{this.props.data}</Text>
      </View>
    );
  }
}

const mapStateToProps = state => ({
  data: state.data,
});

export default connect(mapStateToProps)(MyComponent);

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import { fetchData } from './actions';

class MyComponent extends Component {
  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    if (this.props.loading) {
      return (
        <View>
          <Text>Loading...</Text>
        </View>
      );
    }

    return (
      <View>
        <Text>{this.props.data}</Text>
      </View>
    );
  }
}

const mapStateToProps = state => ({
  data: state.data,
  loading: state.loading,
});

const mapDispatchToProps = {
  fetchData,
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);