时间戳

首页 > 解决方案 > Metronic反应主题对打字稿的问题

reactjs - Metronic反应主题对打字稿的问题

问题描述

它是 v7.1.7，在 react redux 中使用 saga 中间件，并且是用 JavaScript 设计的，而不是 Typescript。我在 authRedux.ts 中的 saga 生成器有问题（原始文件是 authRedux.js）。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,
    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 生成器。我该如何解决？

标签： reactjstypescriptauthenticationreduxsaga

解决方案

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

推荐阅读