错误：在 React useContext 和 useReducer 中未定义

Question

I am trying to make a redux pattern with useContext and useReducer . I create a component that creates a context (a reducer ), and I also have the initial values. I declare my reduction with the foregoing, and return to the child component that is being provided by the values ​​of my Reducer. Then in the next image I have a view that will render a component that makes a form and that is wrapped in the ExpenseReducer component so that it has the values ​​of my reduce.

In the form, I import the context and try to use the dispatch, but I get an error like "undefined"

My Code

import React from "react";

//Context

export const ExpenseContext = React.createContext();

// Reducer
const reducer = (state, action) => {
  switch (action.type) {
    case "HANDLE_SUBMIT":
      return alert("Guardado");

    default:
      return state;
  }
};
// Valores iniciales
const initialExpenses = [
  { id: "37c237f8-3004-4f69-9101-62f59ba4ce09", charge: "carne", amount: "20" },
  {
    id: "32bf7455-61c8-48d5-abe1-a38c93dcf1c8",
    charge: "internet",
    amount: "20"
  },
  { id: "7e22c2e8-7965-41fe-9f39-236f266c9f24", charge: "ca", amount: "1" }
];

function ExpenseReducer({ children }) {
  const [expenses, dispatch] = React.useReducer(reducer, initialExpenses);
  return (
    <ExpenseContext.Provider value={{ expenses, dispatch }}>
      {children}
    </ExpenseContext.Provider>
  );
}

export default ExpenseReducer;

import React from "react";

// Components
import ExpenseForm from "../components/ExpenseForm";
import ExpenseReducer from "../reducers/ExpenseReducer/ExpenseReducer";

function ExpenseNew() {
  return (
    <ExpenseReducer>
      <ExpenseForm />
    </ExpenseReducer>
  );
}

import React, { useContext } from "react";
import "./ExpenseForm.scss";
import { ThemeContext } from "../App";
import { ExpenseContext } from "../reducers/ExpenseReducer/ExpenseReducer";

const ExpenseForm = () =>
  // {
  //   // edit,
  //   // charge,
  //   // amount,
  //   // handleCharge,
  //   // handleAmount,
  //   // handleSubmit
  // }
  {
    // Theme
    const { theme } = useContext(ThemeContext);
    const { expenseContext } = useContext(ExpenseContext);
    return (
      <form
        className="form"
        onSubmit={expenseContext.dispatch("HANDLE_SUBMIT")}
      >
        <div className="form-group">
          {/*To conect the value with the variable */}
          <input
            type="text"
            className={`${theme} form-control`}
            // id="charge"
            // name="charge"
            // placeholder="Gasto"
            // value={charge}
            // onChange={handleCharge}
          />
        </div>
        <div className="form-group">
          {/*To conect the value with the variable */}
          <input
            type="number"
            className={`${theme} form-control`}
            // id="amount"
            // name="amount"
            // placeholder="Cuanto"
            // value={amount}
            // onChange={handleAmount}
          />
          <textarea
            placeholder="Descripción"
            className={`${theme} form-control`}
            id=""
            cols="30"
            rows="10"
          ></textarea>
        </div>
        <button type="submit" className={`btn ${theme}`}>
          {true ? "Editar" : "Guardar"}
        </button>
      </form>
    );
  };

export default ExpenseForm;

Answer 1

According to the docs :

Don't forget that the argument to useContext must be the context object itself:

• Correct: useContext(MyContext)
• Incorrect: useContext(MyContext.Consumer)
• Incorrect: useContext(MyContext.Provider)

Your reducer is returning the provider, not the context object. Hence it results in expenseContext being undefined .