Как удалить сущности из Redux?

Question

[d2207]

Всем привет, осваиваю редакс, написал кейсы для добавления и удаления сущностей. Удаление не работает, логика вроде верная, берём весь ...state, используем на нём метод filter которых возвращает новый массив, состоящий из элементов удовлетворяющих условию, т. е. из элементов не равных action.name. Таким образом мы удалили нужную сущность из массива + создали новый массив, а не мутировали старый, вроде всё верно, но почему не работает?

reducer

export default function reducer(state = initialState, action) {

    switch (action.type) {
        case 'ADD_ITEM':
            return [
                ...state,
                {
                    name: action.name,
                    age: action.age
                }
            ];

        case 'DELETE_ITEM':
            return  [
                ...state,
                state.filter(name => name!== action.name),
            ];

        default:
            return state;
    }
}

render in App.js:

function ListOfUsers() {
        const listItems = users.map(function (value, index) {
            return (
                <div>
                    <li key={index}>{value.name}, {value.age}</li>
                    <button onClick={() => dispatch({ type: 'DELETE_ITEM', name:value.name })}
                            className="btn btn-danger btn-sm">
                        Удалить
                    </button>
                </div>
            )
        });
        return (
            <ul>{listItems}</ul>
        );
    }

state looks like:

const initialState = [
     {
        name: 'Theodore Roosevelt',
        age: 56
    },
];

export default initialState;

Answer 1

[0xD34F]

case 'DELETE_ITEM':
  return state.filter(n => n.name !== action.name);

Comments

[d2207]

Спасибо

Answer 2

[L1nks]

state.filter(name => name!== action.name),
На вопрос почему `filter` не сработал.
Предположим у вас есть массив
[{name: 'Theodore Roosevelt', age: 27}, {name: 'Theodore Roosevelt', age: 25}] и вы хотите пройтись по нему фильтром.
`Filter` принимает callback функцию, которая будет вызвана для каждого элемента массива. Первый аргумент в этой функции будет сам элемент. И когда вы пишете `name` то в этом значении будет объект
{name: 'Theodore Roosevelt', age: 27}, то есть, чтобы ваш код сработал вам надо было написать
state.filter(name => name.name!== action.name),

Comments

[d2207]

Спасибо за объяснение

Answer 3

[d2207]

Кароче я не знаю как, но работа метода filterостаётся загадкой. Если бы кто-то объяснил, я был бы очень благодарен. Переделал с использованием конкат и слайс.

return  [
                ...state.slice(0, action.id).concat(state.slice(action.id + 1))
            ];

Answer 4

[Mikhail Osher]

case 'DELETE_ITEM'
  return state.filter(item => item.name !== action.name);