Как в Redux правильно сделать вывод товаров с возможностью удаления?

Question

[mishapsv]

Задавал похожий, но общий вопрос, тогда не понял, т.к. тугодум. Сейчас более конкретный пример.
(За основу взят пример туду-листа из документации)
Задача:
вывести несколько карточек товаров с возможностью их удаления при нажатии на кнопку (т.е. нажимаем кнопку на карточке товаров => эта карточка исчезает).

Экшен

/*constants\ActionTypes.js*/
export const DELETE_TODO = 'DELETE_TODO';

Экшен криэйтор

/*actions\todos.js*/
import * as types from '../constants/ActionTypes';

export function deleteTodo(id) {
  return { type: types.DELETE_TODO, id };
}

Редьюсер

/*reducers\todos.js*/
import {DELETE_TODO} from '../constants/ActionTypes';

const initialState = [{
  {/*объект с карточками товаров должен быть здесь?*/}
}];

export default function todos(state = initialState, action) {
  switch (action.type) {

  case DELETE_TODO:
    return state.filter(todo =>
      todo.id !== action.id
    );

  default:
    return state;
  }
}

/*reducers\index.js*/
import { combineReducers } from 'redux';
import todos from './todos';

const rootReducer = combineReducers({
  todos
});

export default rootReducer;

"Глупый" компонент карточки товара:

/*components\TodoItem.js*/
import React, { Component, PropTypes } from 'react';

class Bbutton extends Component {
  render() {
    const {todo, completeTodo, deleteTodo} = this.props;
    return (
      <p><a href='#'
className="btn btn-primary" role="button">Подробнее</a></p>
    )};
  }

class TodoItem extends Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    const {todo, deleteTodo, src, title, descr, id} = this.props;
    return (
      <div className="col-sm-4 col-md-4">
              <div className="thumbnail">
                  <img src={src} height="100" alt="..."/>
                  <div className="caption">
                      <h3>{title}</h3>
                      <p>{descr}</p>
                      <Bbutton onClick={() => deleteTodo(id)} />
                  </div>
              </div>
          </div>
    );
  }
}

TodoItem.propTypes = {
  deleteTodo: PropTypes.func.isRequired,
};

export default TodoItem;

"Глупый" компонент, где map-ом будем генерировать карточки товаров

/*components\MainSection.js*/
import React, { Component, PropTypes } from 'react';
import TodoItem from './TodoItem';

/* Этот объект должен быть здесь или в редьюсере? Или подключаться и там и там?
var pictures = [
  {descr: 'Стильный и модный', title: 'Iphone 6', id: 0, src: 'http://content2.onliner.by/catalog/device/header/5c89a202887278d66e83e9ea119a537d.jpg'},
  {descr: 'Стильный и модный 2', title: 'Iphone 5s', id: 1, src: 'http://content2.onliner.by/catalog/device/header/f16849c646ec7b06d7ceaa62c1a1b883.jpg'},
  {descr: 'Стильный и модный 3', title: 'Iphone 5', id: 2, src: 'http://content2.onliner.by/catalog/device/header/98b010c3ae263120c548aa3856fefc2f.jpg'},
];
*/
class MainSection extends Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    const { todos, actions } = this.props;
    return (
      <section className="main">
        <ul className="todo-list">
          {pictures.map(todo =>
            <TodoItem key={todo.id} todo={todo} {...actions} />
          )}
        </ul>
      </section>
    );
  }
}

MainSection.propTypes = {
  todos: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired
};

export default MainSection;

Единственный "умный" (не то что я) компонент

/*containers\App.js*/
import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import MainSection from '../components/MainSection';
import * as TodoActions from '../actions/todos';

class App extends Component {
  render() {
    const { todos, dispatch } = this.props;
    const actions = bindActionCreators(TodoActions, dispatch);

    return (
      <div>
        <MainSection todos={todos} actions={actions} />
      </div>
    );
  }
}

App.propTypes = {
  todos: PropTypes.array.isRequired,
  dispatch: PropTypes.func.isRequired
};

function mapStateToProps(state) {
  return {
    todos: state.todos
  };
}

export default connect(mapStateToProps)(App);

Стор

/*store\configureStore.js*/
import { createStore } from 'redux';
import rootReducer from '../reducers';

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextReducer = require('../reducers');
      store.replaceReducer(nextReducer);
    });
  }
  return store;
}

Привязываем умный компонент к Редаксу

/*index.js*/
import 'babel-core/polyfill';
import React from 'react';
import { Provider } from 'react-redux';
import App from './containers/App';
import configureStore from './store/configureStore';
import 'todomvc-app-css/index.css';

const store = configureStore();

React.render(
  <Provider store={store}>
    {() => <App />}
  </Provider>,
  document.getElementById('root')
);

Как выводить карточки товаров и как удалять при нажатии на кнопку?