Добрый вечер. Столкнулась со следующей проблемой:
У меня есть контейнер, в котором должны выгружаться альбомы, а из них картинки:
AlbumLayout
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';
class AlbumLayout extends Component {
handleClick(album){
browserHistory.push({
pathname: "album/" + album.id,
state: {albumDetails: album}
});
}
renderList(){
return this.props.albums.map((album) => {
return(
<li onClick={this.handleClick.bind(this, album)} key={album.id}>
<img alt="job" src={album.img} />
<p className="album_titulo">{album.title}</p>
</li>
);
});
}
render(){
return (
<div>
<div className="albums">
{this.renderList()}
</div>
</div>
);
}
}
function mapStateToProps(state){
return {
albums: state.album
};
}
export default connect(mapStateToProps)(AlbumLayout);
AlbumShow
import React, { Component } from 'react';
import { connect } from 'react-redux';
class AlbumsShow extends Component {
constructor(props) {
super(props);
this.renderImage = this.renderImage.bind(this);
}
renderImage(){
return this.props.images.map(image => {
return(
<li key={image.id}>
<img alt="job" src={image.img} />
<p className="album_titulo">Test</p>
</li>
);
});
}
render(){
return (
<div>{this.renderImage()}</div>
);
}
}
function mapStateToProps(state){
return {
images: state.albums[0].images
};
}
export default connect(mapStateToProps)(AlbumsShow);
Массив, с помощью которого они должны рендерится находится в редьюсере:
import { IMAGE } from '../actions/index';
const initialState = {
albums: [{
id: 1,
title: "Album First",
img: "https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg",
images: [{
id: 1,
img: "https://s-media-cache-ak0.pinimg.com/564x/ac/53/81/ac538106cc0430926af9b1fbcc761f04.jpg"
},
{
id: 2,
img: "https://s-media-cache-ak0.pinimg.com/564x/ac/53/81/ac538106cc0430926af9b1fbcc761f04.jpg"
}
]
},
{
id: 2,
title: "Album Second",
img: "https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg",
images: [{
id: 1,
img: "https://s-media-cache-ak0.pinimg.com/564x/ac/53/81/ac538106cc0430926af9b1fbcc761f04.jpg"
},
{
id: 2,
img: "https://s-media-cache-ak0.pinimg.com/564x/ac/53/81/ac538106cc0430926af9b1fbcc761f04.jpg"
}
]
},
{
id: 3,
title: "Album Third",
img: "https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg",
images: [{
id: 1,
img: "https://s-media-cache-ak0.pinimg.com/564x/ac/53/81/ac538106cc0430926af9b1fbcc761f04.jpg"
},
{
id: 2,
img: "https://s-media-cache-ak0.pinimg.com/564x/ac/53/81/ac538106cc0430926af9b1fbcc761f04.jpg"
}
]
}
]
}
export default function image(state = [], action) {
switch (action.type) {
case IMAGE:
return [ ...state.image ];
/*no default*/
}
return state;
/*no default*/
}
Еще есть небольшой action
export const IMAGE = 'IMAGE';
В данный момент консоль не выдает ошибку, но ничего и не грузится. Я понимаю, что путь к id album должен быть такой album.albums['0'].id, но по элементам необходимо пробежаться циклом - на этом моменте я застряла и не могу пробежаться циклом ни по AlbumLayout, ни по AlbomShow.
Заранее спасибо.
Вопрос сводится к тому как передать начальное состояние в хранилище.
Он подробно освещен в документации redux кстати.
Варианта собственно два, их можно комбинировать.
То есть в вашем случае вместо
export default function image(state = [], action) {
вызвать
export default function image(state = initialState, action) {
(Здесь используется es6 синтаксис для параметра по умолчанию)
Все проблемы этого кода это разумеется не решит, придется еще разобраться, но начальное состояние подтягиваться уже будет.
Оборудование для ресторана: новинки профессиональной кухонной техники
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Есть карта распределения тарифов SCE(Southern California Edison) по регионамНеобходимо определить к какому региону относится конкретный адрес, найти...