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

Question

[Fierfoxik]

Доброго времени.

При нажатии на кнопку добавить элемент я получаю данные и передаю их в action

данные

{
  "id": "142",
  "author": "46",
  "name": "4646",
  "imgUrl": "data:image/jpeg;base64,/
}

затем в другом компоненте через connect я подключаюсь к store и отрисовываю эти данные

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} >
                                <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>

        )
    }
}

function mapStateToProps (state) {
    return {
        book: state
    }
}

const mapDispatchToProps = (dispatch) => ({
    deleteBook: (params) => dispatch(deleteBook(params))
})

export default connect(mapStateToProps,mapDispatchToProps)(BookList)

Подскажите пожалуйста для удаления данных из store стоит в data объекта кидать его id и затем отправлять его как стейт в редьюсер и затем уже используя фильтр чистить его?

reducer

export default function rootReducer(state = [], action) {
    console.log(action);
    switch (action.type) {
        case  'BUTTON_CLICK':
            return [
                ...state,
                action.book
            ];
        case "DELETE_BOOK":
            console.log(state)
            return state.filter(({ id }) => id !== action.book);
    }
    return state;
}

Answer 1

[Никита Гущин]

Да, оперируйте id. Сохраняйте его в action и дальше фильтруйте

function removeSomething(id) {
  return { type: 'RemoveSomething_Action', payload: { id } }
}

function reducer(state = initialState, action) {
  switch(action.type) {
    //...
    case 'RemoveSomething_Action':
      return state.filter(el => el.id !== action.payload.id)
    // ...
  }
}

У вас так и сделано :)

Comments

[Fierfoxik]

В связи со своей неопытностью, не могу понять нужен ли умный компонент для компонента в котором мы отрисовываем данные и удаляем элементы? ну собственно как же передать сам 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 сделать, чтобы перерендеривался только один элемент?

[Fierfoxik]

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

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

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

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

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

[Никита Гущин]

Fierfoxik:

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

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

[Fierfoxik]

Никита Гущин: т.е получается для чтения этого 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

[Fierfoxik]

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

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'
        }
    }
};