Reactjs MERN Stack：尝试使用Redux删除项，但状态为'；不改变吗？

我一直在尝试使用Traversy Media的MERN堆栈教程，通过以下代码学习MERN堆栈。我目前正在尝试使用Redux删除项目；但是，当我单击该项以删除它时，什么也没有发生

我一直在试图找出在Chrome上使用Redux DevTools的错误，当我尝试删除一个项目时，在“操作”选项卡下会出现delete_item，该操作的类型为：“delete_item”，负载带有我单击的项目id，这一切似乎都是正确的

然而，当我去检查“Diff”选项卡时，它只是说（状态相等），我假设这意味着在我到达itemReducers.js之前，一切都正常工作，因为状态没有显示出来

我已经反复检查了代码中是否有任何拼写错误，但在我看来都是正确的。也许我只是错过了一些东西，因为我花了很长时间在代码上乱搞，试图找出什么是错误的

ShoppingList.js

import React, { Component } from 'react';
import { Container, ListGroup, ListGroupItem, Button } from 'reactstrap';
import { PropTypes } from "prop-types";

import uuid from 'uuid';

import { connect } from "react-redux";
import { getItems, deleteItem } from "../actions/itemActions";

const mapStateToProps = (state) => ({
  item : state.item
});

class ShoppingList extends Component {
  componentDidMount() {
    this.props.getItems();
  }

  onDeleteClick = id => {
    this.props.deleteItem(id);
  };

  render() {
    const { items } = this.props.item;
    return (
      <Container>
        <Button 
          style={{ margin: '2rem 0' }}
          onClick={() => {
            const name = prompt('Enter new item');
            if (name) {
              this.setState(state => ({
                items : [...state.items, { id : uuid.v4(), name }]
              }))
            }
          }}>
            Add Item
        </Button>
        <ListGroup>
          {items.map(({id, name}) => {
            return (
              <ListGroupItem key={ id }>
                { name }
                <Button 
                  style={{ float: 'right' }}
                  onClick={this.onDeleteClick.bind(this, id)}>×</Button>
              </ListGroupItem>
            )
          })}
        </ListGroup>
      </Container>
    );
  }
}

ShoppingList.propTypes = {
  getItems : PropTypes.func.isRequired,
  item : PropTypes.object.isRequired
}

export default connect(mapStateToProps, { getItems, deleteItem })(ShoppingList);

itemReducer.js

import uuid from 'uuid';

const initialState = {
  items : [
    { id: uuid.v4(), name : 'steak'},
    { id: uuid.v4(), name : 'chicken'},
    { id: uuid.v4(), name : 'eggs'}
  ]
}

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case "GET_ITEMS" :
      return {...state};
    case "ADD_ITEM" :
      state = {};
      break;
    case "DELETE_ITEM" : 
      return {
        ...state,
        items : state.items.filter(item => item.id !== action.payload)
      };
    default :
      return {...state};
  }
}

export default itemReducer;

store.js

import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from  'redux-thunk';
import itemReducer from './reducers/itemReducer';

const initialState = {};

const middleware = [thunk];

let store = createStore(combineReducers({item : itemReducer}), initialState, compose(
  applyMiddleware(...middleware),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));

export default store;

---

我还没有彻底研究过这一点，但是你能检查并验证拼写吗？你有一个输入错误：“playload”刚刚看到了这个，我检查了我的代码，修复了这个输入错误，它工作了。在过去的两天里，我花了很多时间试图弄明白这是错的。嗯，现在我觉得自己很笨。谢谢你的第二双眼睛！发生在我们所有人身上，不用担心！我还没有彻底研究过这一点，但是你能检查并验证拼写吗？你有一个输入错误：“playload”刚刚看到了这个，我检查了我的代码，修复了这个输入错误，它工作了。在过去的两天里，我花了很多时间试图弄明白这是错的。嗯，现在我觉得自己很笨。谢谢你的第二双眼睛！发生在我们所有人身上，不用担心！

import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from  'redux-thunk';
import itemReducer from './reducers/itemReducer';

const initialState = {};

const middleware = [thunk];

let store = createStore(combineReducers({item : itemReducer}), initialState, compose(
  applyMiddleware(...middleware),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));

export default store;