React Redux state undefined in mapStateToProps - react-redux

Question

I am having trouble with state being undefined in mapStateToProps in my React Redux app. The only way I can get it to work is to use store.getState(), but I know this is not the correct way to do it. If I log the state to the console, I get undefined (and if I try to map state to properties, I also get undefined). I am stumped as to why this is happening. I feel like I am missing something fundamental, but I just can't put my finger on it. I know using Redux would not be practical normally for a simple app like this, but I just wanted to practise using it. Any help would be appreciated!
This is my mapStateToProps function:
const mapStateToProps = (state) => {
console.log(state); //Returns undefined
tempState = store.getState(); //Why do I have to do this?
return {
text: tempState.reduxText,
author: tempState.reduxAuthor,
backgroundColor: tempState.reduxBackgroundColor,
buttonColor: tempState.reduxButtonColor,
textColor: tempState.reduxTextColor,
tweetURL: tempState.reduxTweetURL,
textFade: tempState.reduxTextFade
}
}
These are my actions and action creators:
const CHANGE_QUOTE_ACTION = 'CHANGE_QUOTE_ACTION';
const CHANGE_QUOTE_TRANSITION = 'CHANGE_QUOTE_TRANSITION';
const changeQuoteActionCreator = () => {
return {
type: CHANGE_QUOTE_ACTION,
payload: {
reduxText: quoteArr[quoteRandomIndex][0],
reduxAuthor: quoteArr[quoteRandomIndex][1],
reduxTweetURL: 'https://twitter.com/intent/tweet?text=\"' + quoteArr[quoteRandomIndex][0] + '\" ' + quoteArr[quoteRandomIndex][1],
reduxTextFade: 'textVisible '
}
}
}
const changeQuoteTransitionActionCreator = () => {
while (quoteArr[quoteRandomIndex][0] == store.getState().reduxText) {
quoteRandomIndex = Math.floor(Math.random() * 10);
}
while ('container-fluid ' + colorArr[colorRandomIndex] + '-color' == store.getState().reduxBackgroundColor) {
colorRandomIndex = Math.floor(Math.random() * 8);
};
return {
type: CHANGE_QUOTE_TRANSITION,
payload: {
reduxBackgroundColor: 'container-fluid ' + colorArr[colorRandomIndex] + '-color',
reduxButtonColor: 'btn btn-outline shadow-none text-white ' + colorArr[colorRandomIndex] + '-color ' + colorArr[colorRandomIndex] + '-hoverColor',
reduxTextColor: colorArr[colorRandomIndex] + '-textColor',
reduxTextFade: 'textInvisible'
}
}
}
const asyncChangeQuoteActionCreator = () => {
return function (dispatch) {
dispatch(changeQuoteTransitionActionCreator());
setTimeout(function () {
dispatch(changeQuoteActionCreator());
}, 1000);
};
}
This is my reducer:
initialReduxState = {
reduxText: '',
reduxAuthor: '',
reduxBackgroundColor: 'container-fluid ' + colorArr[initialColorRandomIndex] + '-color',
reduxButtonColor: 'btn btn-outline shadow-none text-white ' + colorArr[initialColorRandomIndex] + '-color ' + colorArr[initialColorRandomIndex] + '-hoverColor',
reduxTextColor: colorArr[initialColorRandomIndex] + '-textColor',
reduxTweetURL: ''
}
//Redux reducer
const changeQuoteReducer = (state = initialReduxState, action) => {
switch (action.type) {
case CHANGE_QUOTE_ACTION:
return Object.assign({}, state, { reduxText: action.payload.reduxText, reduxAuthor: action.payload.reduxAuthor, reduxTweetURL: action.payload.reduxTweetURL, reduxTextFade: action.payload.reduxTextFade });
case CHANGE_QUOTE_TRANSITION:
return Object.assign({}, state, { reduxBackgroundColor: action.payload.reduxBackgroundColor, reduxButtonColor: action.payload.reduxButtonColor, reduxTextColor: action.payload.reduxTextColor, reduxTextFade: action.payload.reduxTextFade })
default:
return state;
}
}
This is connecting to the store:
const store = Redux.createStore(
changeQuoteReducer,
Redux.applyMiddleware(ReduxThunk.default)
);
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;
This is mapDispatchToProps:
const mapDispatchToProps = (dispatch) => {
return {
changeQuoteDispatch: () => {
dispatch(asyncChangeQuoteActionCreator())
}
}
}
Subscribing to the store, dispatching to the store and connecting Redux to React:
store.subscribe(mapStateToProps);
store.dispatch(mapDispatchToProps);
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);