Попытка преобразовать карусель реакции-бутстрапа в es6 и redux

Я взял пример кода для управляемой карусели отсюда: https://react-bootstrap.github.io/components.html#media-content

И я пытаюсь заставить его работать в es6 с моей настройкой редукции, но увы! несмотря на все мои благородные усилия, я продолжаю получать следующую ошибку:

SlideShow.js?d20f:20 Uncaught TypeError: Не удается прочитать свойство «направление» неопределенного

1. Что я не связываю/не делаю неправильно в своем следующем коде?
2. Могу ли я обрабатывать такое состояние в моем немом компоненте?
3. Почему, ну почему неблагодарные британцы ушли от нас?? ;( (извините, что поцарапал)

Вот мой тупой компонент (component/sldeshow.js):

 import React, { Component, PropTypes } from 'react'
import { List } from 'immutable'
import { Link } from 'react-router'
import { Carousel } from 'react-bootstrap'

class Slides extends Component {

constructor(props) {
    super(props)
    this.state = {
      index: 0,
      direction: null
    }

    // Bind callback methods to make `this` the correct context.
    this.handleSelect = this.handleSelect.bind(this)

  }

  handleSelect(selectedIndex, e) {
    alert('selected=' + selectedIndex + ', direction=' + e.direction)
    this.setState({
      index: selectedIndex,
      direction: e.direction
    })
  }

  render() {
    return (
      <div>
          {
            //this.props.slides
            this.props.slides.map((s)=> 
            {
              let id = s.get('id')
              let title = s.get('title')
              let image = s.get('image')
              let alt = s.get('alt')
              let caption = s.get('caption')
              return (

                <Carousel activeIndex={this.state.index} direction={this.state.direction} onSelect={this.handleSelect} key={id}>
                  <Carousel.Item>
                    <img width={640} height={480} alt="640x480" src={image} alt={alt}/>
                    <Carousel.Caption>
                      <h3>{title}</h3>
                      <p>{caption}</p>
                    </Carousel.Caption>
                  </Carousel.Item>
                  <Carousel.Item>
                    <img width={640} height={480} alt="640x480" src={image} alt={alt}/>
                    <Carousel.Caption>
                      <h3>{title}</h3>
                      <p>{caption}</p>
                    </Carousel.Caption>
                  </Carousel.Item>
                  <Carousel.Item>
                    <img width={640} height={480} alt="640x480" src={image} alt={alt}/>
                    <Carousel.Caption>
                      <h3>{title}</h3>
                      <p>{caption}</p>
                    </Carousel.Caption>
                  </Carousel.Item>
                </Carousel>
                   )
          })
        }
      </div>
    )
  }
}

Slides.propTypes = {

  slides: PropTypes.instanceOf(List).isRequired
}


export default Slides

умный контейнер:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'

import Slides from 'components/SlideShow'
import { getInitalSlides } from 'actions/SlidesActions'


class Home extends Component {

static fetchData({ store }) {
        return store.dispatch(getInitalSlides())
    }

    componentDidMount() {
        this.props.getInitalSlides()
  }

  render() {
    return (
      <div className="Home">
        <h1>Home Page</h1>
        <Slides slides={this.props.slides} />
        <div><Link to="/question">to question</Link></div>
        <div><Link to="/posts">to posts</Link></div>
      </div>
    )
  }
}

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

export { Home }
export default connect(mapStateToProps, { getInitalSlides })(Home)

и пример оригинального кода карусели:

const ControlledCarousel = React.createClass({
  getInitialState() {
    return {
      index: 0,
      direction: null
    };
  },

  handleSelect(selectedIndex, e) {
    alert('selected=' + selectedIndex + ', direction=' + e.direction);
    this.setState({
      index: selectedIndex,
      direction: e.direction
    });
  },

  render() {
    return (
      <Carousel activeIndex={this.state.index} direction={this.state.direction} onSelect={this.handleSelect}>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="/assets/carousel.png"/>
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="/assets/carousel.png"/>
          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="/assets/carousel.png"/>
          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    );
  }
});

p.s. я загружаю свои слайды из API