在redux中,我的reducer在控制台中没有返回任何结果

时间:2017-03-28 23:36:30

标签: javascript reactjs redux

我正在将redux与reactjs一起使用,并在其间应用中间件“thunk”。在动作创建器中,我正在运行http请求,我将响应作为对象发送到reducer,然后reducer返回该数据。

我试图在控制台中显示该数据(或者更重要的是在组件中显示在头版中),但我似乎做错了。这是代码:

动作创作者 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) {
        dispatch(showGalleryAsync(res.data));
      }
    })
    .catch(err => console.error(err));
  }
}
function showGalleryAsync(images) {
  return {
    type: SHOW_GALLERY,
    payload: images
  }
}

减速器 images.js

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

export function showGallery(state=[], action) {
  switch(action.type) {
    case SHOW_GALLERY:
      let images = action.data;
      let arr = [];
      action.payload.map((i, index) => {
        arr.push(i);
      });

      return arr;
    default:
      return state;
    }
  }

组件 Gallery.js

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionGallery } from '../actions/actions';

class Gallery extends React.Component {
  render() {

    console.log(this.props);

    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.actionGallery.map((link, index) => {
                    return <img src={link}></img>
                  }) }
              </div>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    showGallery: state.showGallery
  }
}

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


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

0 个答案:

没有答案