为什么我从不在 TS 中输入 useReducer？

Question

我正在创建一个包含三个值的 reducer 状态，conversations- 具有描述属性的初始空数组，messages- 具有描述属性和 activeConversation 字符串的初始空数组。但我一直在获取打字稿，永远不会出错。我不明白。有人可以帮我解决这个问题吗？

import { useReducer, useContext, createContext, FunctionComponent } from 'react';

export interface IConversations {
  conversationId: string;
  latestMessage: {
    latestMessageText: string;
    createdAt: string;
  };
  recipientUser: {
    fullName: string;
    email: string;
    online: boolean;
    recipientUserId: string;
    profileImg?: string;
  };
}

export interface IMessages {
  _id: string;
  author: string;
  text: string;
  createdAt: string;
  updatedAt: string;
}

interface IMessageReducer {
  conversations: IConversations[];
  messages: IMessages[];
  activeConversation: string;
}

type Action =
  | { type: 'UPLOAD_PROFILE'; profileImg: string }

type Dispatch = (action: Action) => void;

interface IUseMessage {
  messageState: IMessageReducer;
  dispatchMessageContext: Dispatch;
}

const messageReducer = (state: IMessageReducer, action: Action) => {
  switch (action.type) {
    default:
      return state;
  }
};

const MessageContext = createContext({
  conversations: [],
  messages: [],
  activeConversations: ''
});

const MessageProvider: FunctionComponent = ({ children }): JSX.Element => {
  const [messageState, dispatchMessageContext] = useReducer(messageReducer, {
    conversations: [],
    messages: [],
    activeConversations: ''
  });

  return <MessageContext.Provider value={{ messageState, dispatchMessageContext }}>{children}</MessageContext.Provider>
}

const useMessage = (): IMessageReducer => {
  const context = useContext(MessageContext);
  if (context === undefined) {
    throw new Error('useMessage must be used within a MessageProvider');
  }
  return context;
}

export { MessageProvider, useMessage }

Answer 1

您需要在此处使用 typescript 泛型并“强制”react 上下文理解它正在使用的类型。

所以不用

const MessageContext = createContext({

应该是

const MessageContext = createContext<IMessageReducer>({

和

const [messageState, dispatchMessageContext] = useReducer(messageReducer, {

应该变成

const [messageState, dispatchMessageContext] = useReducer<
Reducer<IMessageReducer, any>(messageReducer, {

为什么我从不在 TS 中输入 useReducer？

why I am getting never type in useReducer in TS?

typescript

reactjs

use-reducer