mapStateToProps returns no data - reactjs

Question

In my top-level component App.js, I have
componentWillMount() {
let data = [];
for (let i = 0; i < 10; i++) {
let todayURL = 'http://www.someURL.com/';
let viewDate = moment()
.add(1, 'years')
.add(i, 'days')
.format('MMM-DD');
let date = moment()
.add(1, 'years')
.add(i, 'days')
.format('YYYY-MMM-DD');
let cardURL =
todayURL +
moment()
.add(1, 'years')
.add(i, 'days')
.format('YYYY/MMM-DD.png');
data.push({
id: i,
date,
uri: cardURL
});
}
store.dispatch({ type: 'data_generated', payload: data });
My reducer is handled this way:
export default (state = [], action) => {
case 'data_generated':
return { ...state, calendarData: action.payload };
default:
return state;
}
};
I combine my reducers:
import { combineReducers } from 'redux';
import CalendarReducer from './CalendarReducer';
export default combineReducers({
calendarData: CalendarReducer
});
The idea behind this is to have an initial dataset that the app can use and persist.
In a child component that displays the information in the dataset I access state:
render() {
console.log(this.props)
return( blah blah);
}
const mapStateToProps = state => {
return { calendarData: state.calendarData };
};
export default connect(mapStateToProps)(HomeScreen);
But when I console log I see an empty array:
This is a React Native app using React Navigation.
What's going on?

Answer 1

After a lengthy chat I've figured out what was wrong. Unfortunately for many of us, React, just like native JavaScript, is very good at letting you place your code improperly.
You were configuring your route within a component and had plenty of logic in the life cycle functions, one of which was dispatching data to the store which was never reaching your reducers.
Your problem can be solved, as proven in our chat, by separating your action code inside your App.js to a dedicated action.js file and then importing and adding the same function to mapDispatchToProps inside your Home.jsx. And finally, on componentWillMount() of Home.jsx you invoke the action by this.props.actionName()
Your code does not seem to follow any conventions recommended by Reacts developers themselves.
If you want to improve your React's programming skills along with your programming skills in general, I recommend you the following Udemy course by Stephen Grider.

Answer 2

Try call the props in the constructor on the component. It's a good debut to debug
Hope it helps
constructor(props) {
super(props);
console.log(this.props);
this.state = {
calendarData: props.calendarData
};
}
componentWillReceiveProps(nextProps) {
if (this.props.calendarData !== nextProps.calendarData) {
this.setState({
calendarData: nextProps.calendarData,
});
}
}