component news

import * as React from 'react';
import { INewsItem } from '../../models/news';


interface IProps {
  items: INewsItem[];
}

export default (props: IProps) => {
  return (
    <div>
      { props.items.map((item, i) => (
          <div key={`news-item-${i}`}>
            <span>{ item.title }</span>
          </div>
        ))
      }!
    </div>
  );
}

container news

import * as React from 'react';
import { asyncConnect } from 'redux-connect';
import { connect } from 'react-redux';

import { INews } from '../../models/news';
import { getNews } from '../../redux/modules/news';
import NewsComponent from '../../components/news';

interface IProps {
  news: INews;
}

interface AsyncProps {
  store: {
    dispatch: Redux.Dispatch;
  }
}
class NewsContainer extends React.Component<IProps, {}> {
  public render() {
    return (<NewsComponent items={this.props.news.items} />);
  }
}
const NewsConnected = connect<IProps, {}, IProps>((
      state: { news: INews }) => ({
    news: state.news,
  }))(NewsContainer);

export const News = asyncConnect(
  [{
    promise: (props: AsyncProps) => {
      return props.store.dispatch(getNews());
    },
  }]
)(NewsConnected);

Routes

import * as React from 'react';
import { IndexRoute, Route } from 'react-router';
import { App } from '../containers/app/app';
import { Journal } from '../containers/journal/journal';
import { News } from '../containers/news'
import { NewsCard } from '../containers/news_card/news_card'

export default (
  <Route path="/" component={App}>
    <IndexRoute component={Journal} />
    <Route path="news" component={News} />
    <Route path="news/:id" component={NewsCard} />
  </Route>
);