javascript - Redux 调度不会从数组中删除项目

Question

我正在尝试从数组中删除一个项目，redux 记录器显示一切顺利。

但是，在我单击 x 后，它仍然显示在有序列表下。

Reducer/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

你的代码中有一个小错误

您已分派(dispatch)的操作是 DELETE_POST，而您期望在代码中使用 REMOVE_POST

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

      }

      default:
        return state