react-redux how to render response data from api - reactjs

Question

I followed one of the tutorial from youtube. When I do that it works completely fine. But when I try different api, I'm getting an error items are not defined. Can someone please help me to understand what I am doing wrong.
Thanks
//actions
import axios from 'axios'
export function fetchTweets(brandUrl, responseCode){
let url = brandUrl + '/api/offer/' + responseCode;
return function(dispatch){
axios.get(url)
.then((response) => {
dispatch({
type: 'FETCH_TWEETS_FULFILLED',
payload: response.data
})
})
.catch((error) => {
dispatch({
type: 'FETCH_TWEETS_REJECTED',
payload: error
})
})
}
}
//reducer
export default function reducer(state = {
tweets: [],
fetching: false,
fetched: false,
error: null
}, action) {
switch(action.type){
case 'FETCH_TWEETS_PENDING' :{
return { ...state, fetching: true }
}
case 'FETCH_TWEETS_REJECTED' : {
return { ...state, fetching: false, error: action.payload }
}
case 'FETCH_TWEETS_FULFILLED' : {
return { ...state,
fetching: false,
fetched: true,
tweets: action.payload }
}
}
return state
}
//main component
import React from 'react'
import { connect } from 'react-redux'
import { fetchTweets } from '../actions/tweetsActions'
class Layout extends React.Component{
fetchTweets(){
this.props.dispatch(fetchTweets(brandUrl, responseCode))
}
render(){
const { tweets } = this.props;
if(!tweets.length){
return <button value="Load" onClick={this.fetchTweets.bind(this)}>Load </button>
}
console.log(tweets.response.mainItems.length)
return (
<div>
<p>{tweets.statusMessage}</p>
<ul>
</ul>
</div>
);
}
}
function mapStateToProp(state){
return {
tweets : state.tweets.tweets
}
}
export default connect(mapStateToProp)(Layout)
//store
import { applyMiddleware, createStore } from 'redux'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import logger from 'redux-logger'
import reducer from './reducers'
const middleware = applyMiddleware(promise(), thunk, logger())
export default createStore(reducer, middleware)
// API Response

Answer 1

in main component's mapStateToProps function ,why you are accessing tweets by assigning state.tweets.tweets ,though you dont have reducer named tweets ,and you are not using combineReducer function (which one use in case of multiple reducer).
So you can easily access tweets by writing this.state.tweets .and you can print state in mapStateToProps before returning which might be helpful for debugging......
//main component
function mapStateToProp(state){
console.log(state,"=====>")
return {
tweets : state.tweets
}