Блог

Я просматривал различные ресурсы в Интернете, пытаясь найти рабочее решение для того, что у меня есть, и пока я думаю, что я как бы испортил интеграцию с typescript. Я хотел бы получить некоторую помощь в правильной настройке моих типов для моего перехвата.

У меня есть useUser() перехват, который отправляет действия в мой редуктор, а также возвращает селекторы обратно из моего хранилища. Я добился некоторого прогресса, но я начинаю немного перегибать палку.

перехват: useUser.ts

• Я не уверен, что я могу поместить в качестве возврата для этого перехвата. Я попытался разместить, useUserActionTypes но я не думаю, что это имеет какое-либо значение, тем более, что я не возвращаю ничего, кроме получения объекта ( userData ) или числа ( totalPoints , totalWords ) из хранилища.
• Я не думаю, что я должен «возвращать» свои рассылки, но это сделало typescript менее расстроенным
• Я также могу просто ввести что-то вроде ‘Dog’ вместо FETCH_USER , например, в тип моей отправки. Вероятно, это не имеет значения, но я думаю, что там должна быть защита, верно?
• Довольно озадачен тем, как на самом деле исправить эту ошибку в деструктурированном возврате. У меня есть тип с именем User , который представляет объект, который мой магазин будет иметь для пользователя, но … это не имело никакого значения.

 import { useSelector, useDispatch } from 'react-redux';
import axios from 'axios';
import { User } from '../reducers/user';

export const FETCH_USER = 'FETCH_USER';
export const UPDATE_ERRORS = 'UPDATE_ERRORS';
export const INCREMENT_POINTS = 'INCREMENT_POINTS';
export const INCREMENT_WORDS = 'INCREMENT_WORDS';

type Error = {
  code: number;
  message: string;
};

type FetchUserAction = {
  type: typeof FETCH_USER;
  payload: User;
};

type UpdateErrorsAction = {
  type: typeof UPDATE_ERRORS;
  payload: Error[];
};

type IncrementPointsAction = {
  type: typeof INCREMENT_POINTS;
  payload: number;
};

type IncrementWordsActions = {
  type: typeof INCREMENT_WORDS;
};

// ? Typescript is able to infer the correct type in the Union Type below
export type useUserActionTypes =
  | FetchUserAction
  | UpdateErrorsAction
  | IncrementPointsAction
  | IncrementWordsActions;

export type ReduxStore = {
  alert: any;
  user: User;
};

const useUser = (): useUserActionTypes => {
  const userData: User = useSelector((state: ReduxStore) => state.user);
  const totalPoints: number = useSelector(
    (state: ReduxStore) => state.user.points
  );
  const totalWords: number = useSelector(
    (state: ReduxStore) => state.user.words
  );
  const dispatch = useDispatch();
  const fetchUser = async (): Promise<FetchUserAction | UpdateErrorsAction> => {
    try {
      const response = await axios.get(
        'http://localhost:5000/api/v1/users/WhpHq4qWFdzlhlx2ztqD'
      );
      const user = response.data;
      return dispatch({
        type: FETCH_USER,
        payload: user,
      });
    } catch (error) {
      return dispatch({
        type: UPDATE_ERRORS,
        payload: [
          {
            code: 500,
            message: error.message,
          },
        ],
      });
    }
  };
  const incrementPoints = (amount: number): useUserActionTypes => {
    return dispatch({
      type: INCREMENT_POINTS,
      payload: amount,
    });
  };
  const incrementWords = (): useUserActionTypes => {
    return dispatch({
      type: INCREMENT_WORDS,
    });
  };
  return {
    userData,
    totalPoints,
    totalWords,
    fetchUser,
    incrementPoints,
    incrementWords,
  };
};

export default useUser;
  

На странице, где я пытаюсь использовать селекторы:

• Я думал, что это описано в моем перехвате, у меня есть типы, присвоенные этим константам.
• fetchUser() возвращает тип ‘any’ … возможно, та же проблема, что и выше?

Спасибо за любую помощь, определенно забавно пытаться правильно подключить все это к typescript, но в настоящее время я немного заблудился.

Проблема в том, что вы неправильно ввели useUser , правильный возвращаемый тип в соответствии с вашим кодом будет:

 {
    userData: User;
    totalPoints: number;
    totalWords: number;
    fetchUser(): Promise<FetchUserAction | UpdateErrorsAction>;
    incrementPoints(amount: number): useUserActionTypes;
    incrementWords(): useUserActionTypes;
}
  

Игровая площадка