pro-react-redux
pro-react-redux copied to clipboard
Non-declarative state update
Здесь вы почему-то отказываетесь от декларативного подхода в пользу императивного:
onDelete = (id) => {
this.setState((state) => {
const idx = state.items.findIndex((item) => item.id === id);
const items = [
...state.items.slice(0, idx),
...state.items.slice(idx + 1)
];
return { items };
});
};
Почему бы этот код не написать вот так, в одну строчку?
deleteItem = id => {
this.setState(({ todoData }) => ({todoData: todoData.filter(el => el.id !== id)}));
};
Функция filter
возвращает новый массив, поэтому изначальный массив не изменяется.
То же самое и в этом коде:
toggleProperty = (arr, id, propName) => {
const idx = arr.findIndex((item) => item.id === id);
const oldItem = arr[idx];
const value = !oldItem[propName];
const item = { ...arr[idx], [propName]: value } ;
return [
...arr.slice(0, idx),
item,
...arr.slice(idx + 1)
];
};
Вместо того, чтобы мучаться с нахождением индекса нужного элемента, а затем со сборкой/разборкой массива, лучше всё сделать при помощи одного прохода по массиву с использованием map
:
toggleProperty = (arr, id, propName) => {
// определяем вспомогательную функцию
const inverseProp = (item, id, propName) => {
item.id === id ? return { ...item, [propName]: !item[propName] : return item
};
// и при помощи map возвращаем новый массив
return arr.map(el => inverseProp(el, el.id, propName));
};
Add me on the Telegram ASAP! @JadaWilf
У JadaWilf синтаксическая ошибка в выражении item.id === id ? return { ...item, [propName]: !item[propName] : return item //можно сократить в одну строку: let toggleProperty = (arr, id, propName) => arr.map(el => el.id === id ? { ...el, [propName]: !el[propName] } : el);
@welf - метод filter - как по мне, лучший способ удалить что-то из массива именно про него говорится в в лучших туториалах и книгах.... но автор показал нам другой способ, - сказав, что мы сами можем написать код чуть лучше (или чуть хуже)