useReducer hook, como verificar a ação?

Question

Estive examinando vários recursos aqui no stackoverflow e não encontrei nada (ainda) que esclareça esse problema que estou tendo. Eu tenho um conhecimento básico de texto datilografado, então os erros me limitaram.

Se eu deixar action: anyno meu redutor o erro vai embora. No entanto, se eu digitar, Actionrecebo um erro de sobrecarga. Ainda não sou inteligente o suficiente com o TS para descobrir como raciocinar sobre isso ou resolver, está acontecendo ReducerWithoutAction<any>, mas não tenho ideia de como devo consertar isso. Qualquer ajuda seria apreciada.

Vou continuar bisbilhotando nesse ínterim.

// state types
type MainWrapperType = {
  selection: number;
};

type Word = {
  word: string;
  translation: string;
  wordTranscription: string;
  partOfSpeech: string;
  description: string;
  example?: string;
};

type Notification = {
  format: string;
  message: string;
};

type Content = {
  lessonName: string;
  language: string;
  topics: string[];
  format: string;
  file: File;
};

type InitialState = {
  activeStep: number;
  notification: Notification;
  content: Content;
  newWords: Word[];
  initialTranscript: string;
  modifiedTranscript: string;
  transcriptSentences: string[];
};

const initialState = {
  activeStep: 0,
  notification: {
    format: "",
    message: "",
  },
  content: {
    lessonName: "",
    language: "",
    topics: [],
    format: "",
    file: "",
  },
  newWords: [],
  initialTranscript: "",
  modifiedTranscript: "",
  transcriptSentences: [],
};

// action types
interface SET_FILE {
  type: "SET_FILE";
  payload: File;
}

interface RESET_FILE {
  type: "RESET_FILE";
}

interface SET_INIT_TRANSCRIPT {
  type: "SET_INIT_TRANSCRIPT";
  payload: string;
}

interface SET_MODIFIED_TRANSCRIPT {
  type: "SET_MODIFIED_TRANSCRIPT";
  payload: string;
}

interface ADD_SENTENCE {
  type: "ADD_SENTENCE";
  payload: string;
}

interface SET_SENTENCE_TRANSLATIONS {
  type: "SET_SENTENCE_TRANSLATIONS";
  payload: string[];
}

interface ADD_NEW_WORD {
  type: "ADD_NEW_WORD";
  payload: Word;
}

interface UPDATE_WORD {
  type: "UPDATE_WORD";
  payload: Word;
}

interface INCREMENT_ACTIVE_STEP {
  type: "INCREMENT_ACTIVE_STEP";
}

interface DECREMENT_ACTIVE_STEP {
  type: "DECREMENT_ACTIVE_STEP";
}

interface RESET_ACTIVE_STEP {
  type: "RESET_ACTIVE_STEP";
}

interface RENDER_NOTIFICATION {
  type: "RENDER_NOTIFICATION";
  payload: Notification;
}

type Action =
  | SET_FILE
  | RESET_FILE
  | SET_INIT_TRANSCRIPT
  | SET_MODIFIED_TRANSCRIPT
  | ADD_SENTENCE
  | SET_SENTENCE_TRANSLATIONS
  | ADD_NEW_WORD
  | UPDATE_WORD
  | INCREMENT_ACTIVE_STEP
  | DECREMENT_ACTIVE_STEP
  | RESET_ACTIVE_STEP
  | RENDER_NOTIFICATION;

const reducer = (state: InitialState, action: Action) => {
  switch (action.type) {
    case "SET_FILE":
      return { ...state, content: action.payload };
    case "RESET_FILE":
      return { ...state, content: initialState.content };
    case "SET_INIT_TRANSCRIPT":
      return { ...state, initialTranscript: action.payload };
    case "SET_MODIFIED_TRANSCRIPT":
      return { ...state, modifiedTranscript: action.payload };
    case "ADD_SENTENCE":
      return {
        ...state,
        transcriptSentences: [...state.transcriptSentences, action.payload],
      };
    case "SET_SENTENCE_TRANSLATIONS":
      return {
        ...state,
        transcriptSentences: action.payload,
      };
    case "ADD_NEW_WORD":
      return {
        ...state,
        newWords: [...state.newWords, action.payload],
      };
    case "UPDATE_WORD":
      const newWordsClone = [...state.newWords];
      // console.log("nwc", newWordsClone);
      const seekWord = (wordObject: any) =>
        wordObject.word === action.payload.word;
      const wordIndex = newWordsClone.findIndex(seekWord);
      // console.log("wi", wordIndex, newWordsClone[wordIndex]);
      newWordsClone[wordIndex] = action.payload;
      return {
        ...state,
        newWords: newWordsClone,
      };
    case "INCREMENT_ACTIVE_STEP": {
      return { ...state, activeStep: state.activeStep + 1 };
    }
    case "DECREMENT_ACTIVE_STEP": {
      return { ...state, activeStep: state.activeStep - 1 };
    }
    case "RESET_ACTIVE_STEP": {
      return { ...state, activeStep: 0 };
    }
    case "RENDER_NOTIFICATION":
      return { ...state, notification: action.payload };
    default:
      throw new Error();
  }
};

const UploadPage = () => {
  const [state, dispatch] = useReducer(reducer, initialState); <-- Error
  ...
}

Answer 1

No seu initialState, content.fileé definida como uma cadeia vazia, mas deve ser Fileem vez

type Content = {
  file: File;
  ...
};

type InitialState = {
  content: Content;
  ...
};


const initialState = {
  content: {
    file: "",
  },
  ...
};

Você pode corrigi-lo inicializando um objeto nulo com o tipo correspondente

const EMPTY_FILE = Object.freeze(new File([""], "filename"));
const initialState = {
  content: {
    file: EMPTY_FILE,
  },
  ...
};

Também há um pequeno erro em seu redutor

switch (action.type) {
  case "SET_FILE":
    return { ...state, content: action.payload };
  ...
}

Deveria ser isso

switch (action.type) {
  case "SET_FILE":
    return { ...state, content: { ...state.content, file: action.payload } };
  ...
}