metronic react theme to typescript的问题

Question

它是v7.1.7，在react redux中使用了saga中间件，并且是用JavaScript设计的，而不是Typescript。我在authRedux.ts(原始文件是authRedux.js)的saga生成器中遇到了一个问题。authRedux.js中没有错误，但如果我将其更改为.ts，则会出现两个错误。

src/app/modules/Auth/_redux/authRedux.ts

import { AnyAction } from '@reduxjs/toolkit';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { put, takeLatest } from 'redux-saga/effects';
import { getUserByToken } from './authCrud';

export const actionTypes = {
  Login: '[Login] Action',
  Logout: '[Logout] Action',
  Register: '[Register] Action',
  UserRequested: '[Request User] Action',
  UserLoaded: '[Load User] Auth API',
  SetUser: '[Set User] Action',
};

type TUser = string | undefined;
type TAuthToken = string | undefined;

export interface IAuth {
  user: TUser;
  authToken: TAuthToken;
}

const initialAuthState: IAuth = {
  user: undefined,
  authToken: undefined,
};

export const reducer = persistReducer<IAuth, AnyAction>(
  { storage, key: 'v713-demo1-auth', whitelist: ['user', 'authToken'] },
  (state: IAuth = initialAuthState, action: AnyAction) => {
    switch (action.type) {
      case actionTypes.Login: {
        const { authToken } = action.payload;
        return { authToken, user: undefined };
      }

      case actionTypes.Register: {
        const { authToken } = action.payload;
        return { authToken, user: undefined };
      }

      case actionTypes.Logout: {
        // TODO: Change this code. Actions in reducer aren't allowed.
        return initialAuthState;
      }

      case actionTypes.UserLoaded: {
        const { user } = action.payload;
        return { ...state, user };
      }

      case actionTypes.SetUser: {
        const { user } = action.payload;
        return { ...state, user };
      }

      default:
        return state;
    }
  },
);

export const actions = {
  login: (authToken: TAuthToken) => ({
    type: actionTypes.Login,
    payload: { authToken },
  }),
  register: (authToken: TAuthToken) => ({
    type: actionTypes.Register,
    payload: { authToken },
  }),
  logout: () => ({ type: actionTypes.Logout }),
  requestUser: (user: TUser) => ({
    type: actionTypes.UserRequested,
    payload: { user },
  }),
  fulfillUser: (user: TUser) => ({
    type: actionTypes.UserLoaded,
    payload: { user },
  }),
  setUser: (user: TUser) => ({ type: actionTypes.SetUser, payload: { user } }),
};

export function* saga() {
  yield takeLatest(actionTypes.Login, function* loginSaga() {
    //here is the first error. TypeScript error: Expected 1 arguments, but got 0.  TS2554
    yield put(actions.requestUser());
  });

  yield takeLatest(actionTypes.Register, function* registerSaga() {
    //here is the second error. TypeScript error: Expected 1 arguments, but got 0.  TS2554
    yield put(actions.requestUser());
  });

  yield takeLatest(actionTypes.UserRequested, function* userRequested() {
    const { data: user } = yield getUserByToken();
    yield put(actions.fulfillUser(user));
  });
}

我在出现错误的地方添加了注释。它在saga()函数中，该函数是saga生成器。我怎么才能修复它？

Answer 1

您的requestUser操作创建者接受一个user对象作为参数：

requestUser: (user: TUser) => ({
  type: actionTypes.UserRequested,
  payload: { user },
}),

当切换到.ts时，typescript能够检测到缺少所需参数的函数调用。您正在从您的saga中分派此requestUser操作创建者，而没有向其传递user参数：

// TypeScript error: Expected 1 arguments, but got 0.  TS2554
yield put(actions.requestUser());

在您的userRequested/fulfillUser传奇中，您已经正确地处理了这个问题，您可以从getUserByToken访问user对象，然后将其传递给您的操作创建者。为了正确调用actions.requestUser，您需要在loginSaga和registerSaga中执行相同或类似的操作。