Почему внизу выбрасывается TypeError: диспетчеризация не является функцией?

Question

Файл Contxet.js ниже : -

import React, { Component } from "react";

const Context = React.createContext();
const reducer = (state, action) => {
  switch (action.type) {
    case "DELETE_CONTACT":
      return {
        ...state,
        contacts: state.contacts.filter(
          contact => contact.id !== action.payload
        )
      };
    default:
      return state;
  }
};

export class Provider extends Component {
  constructor() {
    super();
    this.state = {
      contacts: [
        {
          id: 1,
          name: "Person One",
          email: "person1@gmail.com",
          phone: "9999999999"
        },
        {
          id: 2,
          name: "Person Two",
          email: "person2@gmail.com",
          phone: "8888888888"
        },
        {
          id: 3,
          name: "Person 3",
          email: "person3@gmail.com",
          phone: "7777777777"
        }
      ],
      disptach: action => this.setState(state => reducer(action, state))
    };
  }

  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

export const Consumer = Context.Consumer;

Файл Contact.js ниже : -

import React, { Component } from "react";
import PropTypes from "prop-types";
import "./contact.css";
import { Consumer } from "../context";

class Contact extends Component {
  state = {
    showContactInfo: false
  };

  onDeleteClick = (id, dispatch) => {
    dispatch({ type: "DELETE_CONTACT", payload: id });
  };

  render() {
    const { id, name, email, phone } = this.props.contact;
    const { showContactInfo } = this.state;

    return (
      <Consumer>
        {value => {
          const { dispatch } = value;
          return (
            <div className="card card-body mb-3">
              <h4>
                {name}{" "}
                <i
                  onClick={() =>
                    this.setState({
                      showContactInfo: !this.state.showContactInfo
                    })
                  }
                  className="fas fa-sort-down"
                  style={{ cursor: "pointer" }}
                />
                <i
                  className="fas fa-times"
                  style={{ cursor: "pointer", float: "right", color: "red" }}
                  onClick={this.onDeleteClick.bind(this, id, dispatch)}
                />
              </h4>
              {showContactInfo ? (
                <ul className="list-group">
                  <li className="list-group-item">Email :- {email}</li>
                  <li className="list-group-item">Mobile :- {phone}</li>
                </ul>
              ) : null}
              <br />
            </div>
          );
        }}
      </Consumer>
    );
  }
}

Contact.propTypes = {
  contact: PropTypes.object.isRequired
};

export default Contact;

при выполнении удаленияДействие только тогда подсказывает, что отправка не является функцией.Я только начал изучать React.js Пожалуйста, Друзья, если можете, скажите, пожалуйста, что мне здесь не хватает или что не так с приведенным выше кодом.Я тоже пытался решить эту проблему самостоятельно, прибегая к помощи, но не нашел способа ее решить