metronic 反应主题到打字稿的问题

问题描述

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

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,logout: () => ({ type: actionTypes.logout }),requestUser: (user: TUser) => ({
    type: actionTypes.UserRequested,payload: { user },fulfillUser: (user: TUser) => ({
    type: actionTypes.UserLoaded,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 生成器。 我该如何解决？

解决方法

您的 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 传奇中正确处理了这个问题，您从 user 访问 getUserByToken 对象，然后将其传递给您的动作创建者。您需要在 loginSaga 和 registerSaga 中执行相同或类似的操作才能正确调用 actions.requestUser。