Блог

Я новичок в машинописи. У меня есть некоторые проблемы с объявлением типа.

В reducer.ts есть тип состояния, который включает тип GoogleOauthType(который включает статус, сообщение, данные, метку времени) и загрузку и ошибку.

Однако в googleOauthReducer есть некоторые ошибки, из-за которых в ProfileObj и GoogleOauthType отсутствуют статус, сообщение, данные и метка времени.

Я думаю, причина в action.ts, где я объявляю googleOauthSuccess.

Есть ли кто-нибудь, кто может дать мне подсказку по этой проблеме?

Спасибо,,,

 ## types.ts
export interface GoogleOauthType {
  status: number;
  message: string;
  data: string;
  timestamp: number;
}

export type ProfileObj = {
  googleId: string;
  imageUrl: string;
  email: string;
  name: string;
  givenName: string;
  familyName: string;
};
 

 ## actions.ts
import { createAction, ActionType } from 'typesafe-actions';
import { createRequestActionTypes } from '@lib/createRequestSaga';
import { AxiosError } from 'axios';
import { GoogleOauthType, ProfileObj } from './types';

export const [GOOGLE_OAUTH_REQUEST, GOOGLE_OAUTH_SUCCESS, GOOGLE_OAUTH_FAILURE] =
  createRequestActionTypes('auth/GOOGLE_OAUTH');

export const googleOauth = createAction(GOOGLE_OAUTH_REQUEST)<ProfileObj>();
export const googleOauthSuccess = createAction(GOOGLE_OAUTH_SUCCESS)<GoogleOauthType>();

const actions = { googleOauth, googleOauthSuccess };
export type GoogleOauthActionTypes = ActionType<typeof actions>;
 

 ## reducer.ts
import { GOOGLE_OAUTH_SUCCESS, GoogleOauthActionTypes } from './actions';
import { GoogleOauthType } from './types';
import { AxiosError } from 'axios';
import { createReducer } from 'typesafe-actions';
import { GOOGLE_OAUTH_REQUEST } from '@typings/auth';

interface State extends GoogleOauthType {
  loading: boolean;
  error: AxiosError | null;
}

const initialState: State = {
  loading: false,
  status: 0,
  message: '',
  data: '',
  timestamp: 0,
  error: null,
};

const googleOauthReducer = createReducer<State, GoogleOauthActionTypes>(initialState, {
    [GOOGLE_OAUTH_REQUEST]: (state) => ({
        ...state,
        loading: false
    }),
  // error at below
  [GOOGLE_OAUTH_SUCCESS]: (state, { payload: { status, message, data, timestamp } }) => ({
      ...state,
      loading: true,
    status,
    message,
    data,
    timestamp,
  }),
});