Как соединить действия, редукторы и компоненты для отображения данных с использованием приставки?

Question

У меня есть данные, которые выбираются с помощью axios, и данные состоят из мест с указанием места и названия места. Я хочу отобразить местоположение и место внутри, например: <Text style={styles.title}> {this.props.venues.data[0].attributes.name} </Text>

<Text style={styles.title}> {this.props.venues.data[0].attributes.place.location[1]} </Text> они оба не работают в VenueList.js

Как я могу отобразить данные внутри <Text></Text>?

venueReducer.js:

import { FETCH_VENUES } from '../actions/types';

const initialState = {
    items: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCH_VENUES:
            return {
                ...state,
                items: action.payload
            };
        default:
            return state;
    }
}

venueAction.js:

import { FETCH_VENUES } from './types';
import axios from 'axios';

export const fetchVenues = () => dispatch => {
    axios.get(`api_link`)
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues.data
        })
    )
    .catch( error => {
        console.log(error);
    });
};

VenueList.js:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Text, Image, FlatList, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import { fetchVenues } from '../actions/venueAction';

class VenueList extends Component {

    componentWillMount () {
        this.props.fetchVenues();
    }

    render() {

    console.log(this.props.venues)

        return (
            <View style={styles.container}>
                <View style={styles.boxcontainer}>
                    <Image
                    style={styles.img}
                    source={{ uri: 'https://www.dike.lib.ia.us/images/sample-1.jpg/image' }}
                    />
                    <View style={styles.card}>
                        <Text>
                            <Text style={styles.title}> {this.props.venues.data[0].attributes.name} </Text>
                            <Text style={styles.location}> / {this.props.venues.data[0].attributes.place.location[0]} </Text> 
                        </Text>
                    </View>
                </View>
            </View>
        );
    }
}  

const mapStateToProps = state => ({
    venues: state.items
})

export default connect (mapStateToProps, { fetchVenues })(VenueList);

Пример данных:

{
  "data": [
    {
      "type": "venues",
      "id": "nb",
      "attributes": {
        "name": "Barasti Beach",
        "description": "Barasti Beach is lotacated in the awesome barasti beach",
        "price_range": "$$$",
        "opening_hours": "10:30-12:40/16:00-2:00",
        "organization": {
          "id": "GD",
          "legal_name": "Barasti",
          "brand": "Barasti"
        },
        "place": {
          "address": "Le Meridien Mina Seyahi Beach Resort & Marina, Dubai Marina - Dubai - United Arab Emirates",
          "latitude": "25.092648",
          "location": [
            "Marina Bay",
            "Dubai",
            "Arab Emirate United"
          ]
        }
      }
    }
  ],
  "meta": {
    "total": 1,
    "cursor": {
      "current": 1,
      "prev": null,
      "next": null,
      "count": 25
    }
  }
}

Я хочу отобразить название места проведения Barasti Beach и местоположение Marina Bay внутри <Text>.

Answer 1

Проблема здесь axios.get (api_link)

Когда вы используете литералы шаблона, вам нужно использовать $ {}, чтобы напечатать значение

Так и должно быть

axios.get(`${api_link}`)
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues.data
        })
    )
    .catch( error => {
        console.log(error);
    });

но не

axios.get(`api_link`)
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues.data
        })
    )
    .catch( error => {
        console.log(error);
    });