我正在将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);