在调用组件渲染时，Redux数据给我未定义

我正在使用反应和还原的thunk . 我的动作创建者执行API调用并返回属性“data”中的数据，我的reducer返回该对象 . 我将此返回的对象映射到组件中的props . 它是一个包含16个项目的数组（每个项目都是一个图像网址） . 当我在console.log（这个）时，我可以点击查看数据，但如果我更进一步，如console.log（this.props.showGallery.imageLinks），则显示未定义 .

另一种情况是，当我渲染时，我可以清楚地看到我的 web page 上数组中项目的所有文本，但是当我在它上面使用.map时，控制台说不能读取未定义的属性"map"并且网页只是空的 . 我做错了吗？我怎样才能正常制作这些数据？

我是否错误地理解了redux概念？

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));
  }
}

减速机 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 以上：

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>
        

        <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);

一个 regular component 只保存其他容器/组件

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>
          

          <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"));