Redux dispatch не удаляет элемент из массива

Question

Я пытаюсь удалить элемент из массива, логарифм редукса показывает, что все прошло хорошо.

Однако, он все еще отображается под упорядоченным списком, после того как я нажму 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,
    }

  ]

Answer 1

Это сработало для меня, спасибо вам, ребята, за ваш вклад.

  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
  }

}

Answer 2

Что ж, у вас есть небольшая ошибка в вашем коде

Отправленное вами действие - DELETE_POST, тогда как вы ожидаете REMOVE_POST в своем коде

case 'DELETE_POST': {
      return Object.assign({}, state, {
        posts: [...state.posts.filter(post=> post.id !== action.id)],
      });

      }

      default:
        return state