Redux data is giving me undefined when calling on a component rendering

Question

I am utilizing thunk with react and redux. My action creator executes an API call and returns data in a property "data" and my reducer returns that object. I have this returned object mapped to props in my component. Its an array of 16 items (each item is an image url). when I console.log(this) I can click through and see the data, but if I go further like console.log(this.props.showGallery.imageLinks) it shows undefined.

Another situation is that when I render { this.props.showGallery.imageLinks } I can clearly see all the text of the items in the array on my web page but when I use .map on it, the console says cannot read property "map" of undefined and the web page is just empty. Am I doing this wrong? How can I make this data like normally?

Am I understanding redux concepts wrongly?

actions.js

export const SHOW_GALLERY = 'SHOW_GALLERY';
import axios from 'axios';



// FETCH THE IMAGES
export const actionGallery = () => {
  return ( dispatch ) => {
    axios.get('../images')
    .then(res => {
      if (res.status === 200) {
        return dispatch({ type: SHOW_GALLERY, data: [...res.data] });
      }
    })
    .catch(err => console.error(err));
  }
}

reducer images.js

import { HEAD_SELECTED, SHOW_GALLERY } from '../actions/actions';
import { actionSelectHeadImg } from '../actions/actions';
import { actionGallery } from '../actions/actions';


// Show the image links from an array
export function showGallery(state={}, action) {
  switch(action.type) {
    case SHOW_GALLERY:
      return Object.assign({}, state, { imageLinks: new Array(action.data) })
    default:
      return state;
    }
  }

combined Reducers for above:

import React from 'react';
import { combineReducers } from 'redux';
import { showGallery, headSelected } from './images';

// Combine all your reducers to this
const allReducers =  combineReducers({
  showGallery,
  headSelected
});

export default allReducers;

component / container Gallery.js

import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionGallery } from '../actions/actions';
import cheerio from 'cheerio';

class Gallery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    }
    this.props.actionGallery();
  }
  render() {
    return (
      <div>
        <h1>This is the Gallery.</h1>
        <br />
        <div className="container">
          <div className="row">
              <div className="col-md-8">
                <h2>H2 h2 h2 2h2 </h2>
                { this.props.showGallery.imageLinks.forEach((i, index) => {
                  <p>i</p>
                }) }
              </div>
          </div>
        </div>
      </div>
    );
  }
}



function mapStateToProps(state) {
  return {
    showGallery: state.showGallery,
    headSelected: state.headSelected,
    newState: state
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    actionGallery,
    actionSelectHeadImg
  }, dispatch)
}


export default connect(mapStateToProps, mapDispatchToProps)(Gallery);

A regular component that just holds the other container/components

import React from 'react';
import ReactDOM from 'react-dom';
import Gallery from './containers/Gallery';
import HeadingImg from './containers/HeadingImg';

class App extends React.Component {
  render() {
    //console.log(this.props.actionGallery())
    return (
      <div>
        <center>
          <h3>SELECTED IMAGE:</h3>
          <br />
          <HeadingImg />
          <hr />
          <Gallery />
        </center>
      </div>
    );
  }
}

export default App;

TOP LEVEL COMPONENT (MAIN COMPONENT)

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import App from '../Components/Earth/app';
import allReducers from '../Components/Earth/reducers';
import thunk from 'redux-thunk';



const store = createStore(allReducers, applyMiddleware(thunk));


ReactDOM.render(
  <Provider store={store}>
    <App store={store}/>
  </Provider>
, document.getElementById("root"));

Answer 1

I'm assuming when you create your store, you only have the one reducer. If that is the case then your assumption about 'state.showGallery' existing doesn't. Instead imageLinks will be in state without the 'showGallery'.

If my assumption is correct, then you should change your mapStateToProps to have showGallery as:

showGallery: { imageLinks: state.imageLinks },