Ошибки сборки при использовании React.Reducer в провайдере

На чтение 4 мин Опубликовано 24.09.2024

Вопрос или проблема

У меня есть следующий фрагмент кода для настройки React.Reducer вместе с провайдером. Однако у меня возникают проблемы со сборкой в этом коде:

export const ResultProvider: React.FC<MyProviderProps> = ({ children }) => {
  const [state, dispatch] = React.useReducer(reducer, initState);

  return (
    <resultStateContext.Provider value={state}>
      <resultDispatchContext.Provider value={dispatch}>
        {children}
      </resultDispatchContext.Provider>
    </resultStateContext.Provider>
  );
};

По какой-то причине я получаю несколько ошибок, которые говорят:

Не удается найти пространство имен ‘resultStateContext.’

Не удается найти пространство имен ‘resultDispatchContext’.ts(2503)

Не удается найти имя ‘value’.ts(2304)

Оператор ‘<‘ не может быть применен к типам ‘boolean’ и ‘RegExp’.ts(2365)

Это полный файл. Есть ли причина, по которой он не собирается правильно?

import * as React from "react";

export type Status = "failed" | "fulfilled";

export type ResultsState = {
  result: string | undefined;
  status: Status;
};

export type ResultsAction =
  | { type: "SUCCESS"; payload: { result: string } }
  | { type: "FAILURE" };

export const resultStateContext = React.createContext<ResultsState | undefined>(undefined);
export const resultDispatchContext = React.createContext<React.Dispatch<ResultsAction> | undefined>(undefined);

const initState: ResultsState = {
  result: undefined,
  status: "fulfilled",
};

const reducer = (
  state: ResultsState,
  action: ResultsAction
): ResultsState => {
  switch (action.type) {
    case "SUCCESS": {
      return {
        ...state,
        status: "fulfilled",
        result: action.payload.result,
      };
    }
    case "FAILURE": {
      return {
        ...state,
        status: "failed",
        result: undefined,
      };
    }
    default:
      return state;
  }
};

type MyProviderProps = { children: React.ReactNode };

export const SearchProvider: React.FC<MyProviderProps> = ({ children }) => {
  const [state, dispatch] = React.useReducer(reducer, initState);

  return (
    <resultStateContext.Provider value={state}>
      <resultDispatchContext.Provider value={dispatch}>
        {children}
      </resultDispatchContext.Provider>
    </resultStateContext.Provider>
  );
};

export const useResultState = (): ResultsState => {
  const context = React.useContext(resultStateContext);
  return context;
};

export const useResultDispatch = (): React.Dispatch<ResultsAction> => {
  const context = React.useContext(resultDispatchContext);
  return context;
};

Ответ или решение

Проблема, с которой вы сталкиваетесь при компиляции вашего кода React, касается неверного использования угловых скобок (< и >), которые были заменены на HTML-сущности (< и >).

Ваша текущая реализация использует HTML-сущности, из-за чего React не может разобрать код корректно. Вот как вы можете исправить свой код, чтобы избежать возникших ошибок.

Вот исправленная версия вашего файла:

import * as React from "react";

export type Status = "failed" | "fulfilled";

export type ResultsState = {
  result: string | undefined;
  status: Status;
};

export type ResultsAction =
  | { type: "SUCCESS"; payload: { result: string } }
  | { type: "FAILURE" };

export const resultStateContext = React.createContext<ResultsState | undefined>(undefined);
export const resultDispatchContext = React.createContext<React.Dispatch<ResultsAction> | undefined>(undefined);

const initState: ResultsState = {
  result: undefined,
  status: "fulfilled",
};

const reducer = (
  state: ResultsState,
  action: ResultsAction
): ResultsState => {
  switch (action.type) {
    case "SUCCESS": {
      return {
        ...state,
        status: "fulfilled",
        result: action.payload.result,
      };
    }
    case "FAILURE": {
      return {
        ...state,
        status: "failed",
        result: undefined,
      };
    }
    default:
      return state;
  }
};

type MyProviderProps = { children: React.ReactNode };

export const ResultProvider: React.FC<MyProviderProps> = ({ children }) => {
  const [state, dispatch] = React.useReducer(reducer, initState);

  return (
    <resultStateContext.Provider value={state}>
      <resultDispatchContext.Provider value={dispatch}>
        {children}
      </resultDispatchContext.Provider>
    </resultStateContext.Provider>
  );
};

export const useResultState = (): ResultsState => {
  const context = React.useContext(resultStateContext);
  if (context === undefined) {
    throw new Error("useResultState must be used within a ResultProvider");
  }
  return context;
};

export const useResultDispatch = (): React.Dispatch<ResultsAction> => {
  const context = React.useContext(resultDispatchContext);
  if (context === undefined) {
    throw new Error("useResultDispatch must be used within a ResultProvider");
  }
  return context;
};

Внесённые изменения и объяснение:

Замена HTML-сущностей на обычные угловые скобки: Я заменил все < на < и > на >. Это решение устранит ошибки, связанные с некорректным синтаксисом.
Проверка контекста: В функции useResultState и useResultDispatch добавлена проверка на undefined. Это необходимо для безопасного использования контекста. Если контекст недоступен (например, если хук был вызван вне провайдера), будет выброшено исключение с объяснением.

После внесения этих изменений ваш код должен успешно компилироваться и работать без ошибок. Убедитесь, что используете правильный контекст при работе с хуками состояния и диспатча в вашем компоненте.