Стек MERN: Пытаетесь удалить элемент с помощью Redux, но состояние не меняется?

Question

Я пытался изучить стек MERN, следуя коду, используя учебник Traversy Media по стеку MERN.В настоящее время я нахожусь на Part 6 , где я пытаюсь удалить элемент, используя Redux;однако, когда я щелкаю элемент, чтобы удалить его, ничего не происходит.

Я пытался выяснить, что не так, используя Redux DevTools в Chrome и когда я пытаюсь удалить элемент, в разделе «Действие».Появляется вкладка «DELETE_ITEM», и действие имеет тип: «DELETE_ITEM» и полезную нагрузку с идентификатором элемента, который я щелкнул, что кажется правильным.

Однако, когда я иду, чтобы проверить вкладку «Разница», онопросто говорит (состояния равны), что я предполагаю, означает, что все работает правильно, пока я не достигну 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);

itemActions.js

export const getItems = () => {
  return {
    type: "GET_ITEMS"
  }
}

export const addItem = () => {
  return {
    type : "ADD_ITEM"
  }
}

export const deleteItem = id => {
  return {
    type : "DELETE_ITEM",
    playload: id
  }
}

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;