Рендеринг компоненты из редьюсера

233
25 мая 2017, 10:41

Добрый вечер. Столкнулась со следующей проблемой:

У меня есть контейнер, в котором должны выгружаться альбомы, а из них картинки:

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.

Заранее спасибо.

Answer 1

Вопрос сводится к тому как передать начальное состояние в хранилище.
Он подробно освещен в документации redux кстати.

Варианта собственно два, их можно комбинировать.

  1. Передать вторым параметром в createStore начальное состояние целиком.
  2. Автомагически собрать начальное состояние на основе вызовов редьюсеров со state undefined. Есть такой принятый подход - редьюсер вызванный с undefined state должен возвращать начальное состояние.

То есть в вашем случае вместо

export default function image(state = [], action) {

вызвать

export default function image(state = initialState, action) {

(Здесь используется es6 синтаксис для параметра по умолчанию)

Все проблемы этого кода это разумеется не решит, придется еще разобраться, но начальное состояние подтягиваться уже будет.

READ ALSO
Как получить значение с callback функции?

Как получить значение с callback функции?

Есть некий запрос к IndexedDB

312
Скрытие блоков jQuery

Скрытие блоков jQuery

Доброго времени суток,

281
SCE baseline region

SCE baseline region

Есть карта распределения тарифов SCE(Southern California Edison) по регионамНеобходимо определить к какому региону относится конкретный адрес, найти...

202