Отправка Redux не удаляет элемент из массива
Пытаюсь удалить элемент из массива, регистратор redux показывает, что все прошло хорошо.
Однако он по-прежнему отображается в упорядоченном списке после того, как я нажму x.
Редуктор / posts.js
case 'REMOVE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
}
компоненты / TodoList.js
import React from 'react';
import {connect} from 'react-redux';
import { deletePost } from '../actions'
const PostList = ({posts, deletePost}) => (
<ul className = "list-group">
{posts.map(post=>
<li
className = "list-group-item" key = {post.id} {...post}> {post.text}
<button type = "submit" onClick = {()=> deletePost(post.id)} className = " btn btn-small-primary"> X </button>
</li>
)}
</ul>
);
const mapStateToProps = (state) => {
return { posts: state.posts };
};
const mapDispatchToProps = dispatch => ({
deletePost: id => dispatch(deletePost(id))
})
export default connect(mapStateToProps, mapDispatchToProps)(PostList);
Обновлено.
**ADD_POST reducer**
case 'ADD_POST':
return [
...state,
{
id:action.id,
text:action.text,
}
]
Или хотя бы показать содержимое массива
я его обновил. возможно, это дает понимание.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Что ж, у вас есть небольшая ошибка в вашем коде
Вы отправили действие DELETE_POST, тогда как вы ожидаете REMOVE_POST в своем коде.
case 'DELETE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
Это должен быть case 'ADD_POST': return { ...state, posts: [...state.posts, { id:action.id, text:action.text, } ] }
проверьте мой комментарий выше, вы ADD_POST тоже не правильно
Это может быть из-за других ошибок в вашем коде, ваше состояние - это объект, а сообщение - это ключ к нему, это то, что кажется из вашего кода DELETE_POST, если это не так, DELETE_POST необходимо изменить. В любом случае, я хотел бы знать, каково начальное состояние вашего редуктора
Можно ли обновить код, у меня проблемы с пониманием встроенного кода.
Конечно, обновите свой код редуктора с помощью ADD_POST и REMOVE_POST вместе с начальным состоянием, и я обновлю свой ответ в соответствии с этим
Это сработало для меня, спасибо вам, ребята, за ваш вклад.
switch(action.type){
case 'ADD_POST':
return [
...state,
{
id:action.id,
text:action.text,
}
]
case 'DELETE_POST':
return state.filter(({ id }) => id !== action.id);
default:
return state
}
}
Можете дать ссылку на демо?