Как удалить элемент из компонента и из store?

В связи со своей неопытностью, не могу понять нужен ли умный компонент для компонента в котором мы отрисовываем данные и удаляем элементы? ну собственно как же передать сам id
не будет ли это ошибкой если обойтись без стейта и сделать вот так?

test(e){
        this.props.deleteBook({
            id: e.target.parentNode.id
        });
    }

render() {
        return (
                <div className='book-list clearfix'>
                    <h2>Здесь будет ваш список книг!</h2>
                    {this.props.book.map((el, index) =>
                        (el.name.length === 0 && el.author.length === 0) ? console.log(el) :
                            <div className="book-item" key={index} id={el.id}>
                                <div className="book-item__delete-btn" onClick={this.test}></div>
                                <div className="book-item__img">
                                    <img src={el.imgUrl} alt=""/>
                                    <div className="book-item__info">
                                        <div>{el.author}</div>
                                        <div>{el.name }</div>
                                    </div>
                                </div>
                            </div>
                        )}
                </div>

        )

Fierfoxik: мне такое решение не нравится - т.к. id вы получаете неявно.

Я бы на Вашем месте сделал так:

• Компонент BooksList. Принимает на вход books - массив id (только id). Он подключен к стору.
  
• Компонент Book. Принимает на вход id и item. Он также подключен к стору. id мы получаем из компонента BooksList, а затем в mapState получаем нужную инфу и кладем ее в item. Там же (в mapActions) делаем onClick
  

Пример можно посмотреть тут React-Redux. Какой путь правильнее: вызов connect на главном файле или на разных, которым нужно пробросить данные? , еще информация - тут Как в REACT-REDUX сделать, чтобы перерендеривался только один элемент?

Никита Гущин:

id вы получаете неявно.

Но id же мы получаем из того же объекта что и все данные элемента, вполне же ясно откуда мы его получили

не совсем понимаю зачем так усложнять конструкцию
Таким образом action должен иметь такой вид?

const addBook = (payload) => { return { type: 'BUTTON_CLICK', {
     id:[payload.id]
     item: payload.item
 }} };

Fierfoxik:

Но id же мы получаем из того же объекта что и все данные элемента, вполне же ясно откуда мы его получили

Дело не в том. Вот обернули вы кнопку в еще один div: что в этом случае вернет e.target.parentNode.id ? Будет баг, то есть вызов обработчика зависит от контекста, а это не есть хорошо

Никита Гущин: т.е получается для чтения этого id нам нужно брать this.props.id? но там же массив id
И так же не совсем понял как получать данные кроме id в компоненте элемента, ведь если мы делаем такую структуру то создаем каждый раз новый элемент
reducer

switch (action.type) {
        case  'BUTTON_CLICK':
            return [
                ...state,
                {
                    id: [action.books.id],
                    item: action.books
                }
            ];

bookitems

return (
            <div>
                {this.props.books.map((id, index) => <Book key={index} id={id.id} />)}
            </div>
        )

ну а в самом компоненте мы принимаем объект из store и так же проходим по циклу в связи с чем и у нас отрисовывается первый элемент , второй добавленный и снова первый элемент и второй добавленный.

Или же вы имели ввиду что надо передать и сам объект через родительский компонент и так же создать кнопку в род. компоненте и передать ее через пропсы дочернему?

Не совсем понятно с этой частью

а затем в mapState получаем нужную инфу и кладем ее в item. Там же (в mapActions) делаем onClick

Ведь тогда будет 2 цикла, для id и для items.
И не понятно что значит в mapActions делаем onClick

Никита Гущин: или же вы предложили вот такую структуру?

const state = {
    todos: [1, 2],
    todosById: {
        1: {
            id: 1,
            task: 'Do laundry',
            completed: true,
            authorId: 1
        },
        2: {
            id: 2,
            task: 'Paint fence',
            completed: false,
            authorId: 1
        }
    },
    authorsById: {
        1: {
            id: 1,
            name: 'Billy Bob',
            role: 'Assistant Editor'
        }
    }
};