如何使用Redux连接动作，Reducer和组件以显示数据？

Question

I have data which is fetched by axios and the data consists of venues with location and name of venue. I want to display location and venue inside eg: <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> both of them doesn't work in VenueList.js

How can I display the data inside <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);

Example data:

{
  "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
    }
  }
}

I want to display venue name Barasti Beach and location Marina Bay inside <Text> .

Answer 1

The issue is here axios.get( api_link )

When you are using template literals you need to use ${} to print the value

So it should be

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

but not

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