React Native + Expo アプリで unstatedのStateにaxiosを使って簡易テストサーバーからデータ取得

$ npm install -g http-server

{"customers":[{"id":0,"name":"ABC Store","addr1":"123 Abc St.","addr2":"","city":"New York","state":"NY","zip":"10001"},{"id":1,"name":"123 Deli","addr1":"1 Def Ave.","addr2":"","city":"New York","state":"NY","zip":"10002"},{"id":2,"name":"Xyz mart","addr1":"23 Xyz Blvd.","addr2":"","city":"New York","state":"NY","zip":"10003"},{"id":3,"name":"Xyz2 mart","addr1":"1 Xyz Blvd.","addr2":"","city":"New York","state":"NY","zip":"10004"}],"products":[{"id":0,"name":"Blue ribbon","shortName":"B.R.","price":10.5,"cost":7.2},{"id":1,"name":"Red ribbon","shortName":"R.R.","price":9.5,"cost":6},{"id":3,"name":"White shirt","shortName":"W.S.","price":15,"cost":9.3}],"invoices":[{"id":0,"date":"2/2/2019","customer":0,"items":[{"product":0,"qty":5,"adjust":0,"credit":0},{"product":1,"qty":3,"adjust":0,"credit":0},{"product":2,"qty":4,"adjust":0,"credit":0}]},{"id":1,"date":"2/2/2019","customer":0,"items":[{"product":0,"qty":7,"adjust":0,"credit":0}]},{"id":2,"date":"2/2/2019","customer":3,"items":[{"product":0,"qty":5,"adjust":0,"credit":0},{"product":1,"qty":3,"adjust":0,"credit":0},{"product":2,"qty":4,"adjust":0,"credit":0}]},{"id":3,"date":"2/2/2019","customer":2,"items":[{"product":0,"qty":5,"adjust":0,"credit":0},{"product":1,"qty":3,"adjust":0,"credit":0},{"product":2,"qty":4,"adjust":0,"credit":0}]}]}

$ cd ~/ExpoProjects/hello-world-testdata
$ http-server

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.1.10:8080
Hit CTRL-C to stop the server

$ npm install axios

...
import axios from "axios";
const INVOICE_API_ENDPOINT = "http://127.0.0.1:8080/invoice.js";
...
export default class InvoiceContainer extends Container {
  constructor(props = {}) {
    super();
    this.state = {
      data: props.initialSeeding ? Seeder.getSeed() : this.getEmptyData(),
      isDataLoading: false,
    };
  }
...
  getDataFromServer() {
    this.setState({ isDataLoading: true });
    axios
      .get(INVOICE_API_ENDPOINT, { params: {} })
      .then((results) => {
        console.log("HTTP Request succeeded.");
        console.log(results);
        this.setState({ data: results.data });
        this.setState({ isDataLoading: false });
      })
      .catch(() => {
        console.log("HTTP Request failed.");
        this.setState({ isDataLoading: false });
      });
  }
}

...
class HomeScreenContent extends React.Component {
  constructor(props) {
    super(props);
    this.onImportClick = this.onImportClick.bind(this);
  }

  onImportClick() {
    this.props.globalState.getDataFromServer();
  }
    
  render() {
    let globalState = this.props.globalState;
    let invoiceList = <Text>No invoice</Text>;
 
    // Wait for data loading...
    if (globalState.state.isDataLoading) {
      return (
        <View>
          <Text>loading...</Text>
        </View>
      );
    }
...
    return (
      <Subscribe to={[InvoiceContainer]}>
        {(globalState) => (
          <Container>
            <Content>
              <View style={{ flexDirection: "row" }}>
                <Left>
                  <Button light onPress={() => this.onImportClick()}>
                    <Icon type="FontAwesome5" name="file-import" />
                    <Text style={{ paddingLeft: 0 }}>Import</Text>
                  </Button>
                </Left>
                <Right>
                  <Button
                    onPress={() => this.props.navigation.navigate("Summary")}
                  >
                    <Icon type="FontAwesome5" name="poll-h" />
                    <Text style={{ paddingLeft: 0 }}>Summary</Text>
                  </Button>
                </Right>
              </View>

              {invoiceList}

              <View style={{ flexDirection: "row" }}>
                <Left>
                  <Button
                    onPress={() =>
                      this.props.navigation.navigate("InvoiceEdit")
                    }
                  >
                    <Icon type="FontAwesome5" name="file-invoice-dollar" />
                    <Text style={{ paddingLeft: 0 }}>InvoiceEdit</Text>
                  </Button>
                </Left>
              </View>
            </Content>

            <StatusBar style="auto" />
          </Container>
        )}
      </Subscribe>
    );
...