如何将状态更改操作提取到具有类型参数的命名函数？ NgRx，角度

Question

有没有办法创建一个命名状态更改函数，具有适当的参数类型，在创建减速器时将在on方法中接受？

我想创建onLoginSuccessful函数，该函数将处理状态更改并可以传递给减速器中的on方法。

但是当我尝试创建onLoginSuccessful时，出现 TS 编译错误。

//== actions.ts file ==//
export const loginSuccessful = createAction(
    '[Login page] Login successful',
    props<{authToken: string}>()
);

//== reducer.ts file ==//
export const initialState: AuthState = {
    authToken: null
};

// this works
export const reducer = createReducer(
    initialState,
    on(loginSuccessful, (state, action) => {
        return {
            ...state,
            authToken: action.authToken
        };
    })
);

// this does NOT work
// creating named function onLoginSuccess with typed params
function onLoginSuccess(state: AuthState, action: typeof loginSuccessful): AuthState {
    return {
        ...state,
        authToken: action.authToken
    };
}

export const reducer = createReducer(
    initialState,
    on(loginSuccessful, onLoginSuccess) // <-- here on "onLoginSuccess" param throws TS compiler an error
);

TS编译错误：

'(state: AuthState, action: ActionCreator<"[登录页面] 登录成功", (props: { authToken: string; }) => { authToken: string; } & TypedAction<"[登录页面] 登录成功的参数">>) => AuthState' 不能分配给类型为 'OnReducer<AuthState, [ActionCreator<"[Login page] 登录成功的参数", (props: { authToken: string; }) => { authToken: string; } & TypedAction<"[登录页面]登录成功">>]>'. 参数“action”和“action”的类型不兼容。 输入 '{ authToken: 字符串; } & TypedAction<"[登录页面] 登录成功"> & { type: "[登录页面] 登录成功"; }' 不可分配到类型 'ActionCreator<"[登录页面] 登录成功", (props: { authToken: string; }) => { authToken: string; } & TypedAction<"[登录页面]登录成功">>'. 输入 '{ authToken: 字符串; } & TypedAction<"[登录页面] 登录成功"> & { type: "[登录页面] 登录成功"; }' 不可分配给类型 '(props: { authToken: string; }) => { authToken: string; } & TypedAction<"[登录页面]登录成功">'。 输入 '{ authToken: 字符串; } & TypedAction<"[登录页面] 登录成功"> & { type: "[登录页面] 登录成功"; }' 不匹配签名 '(props: { authToken: string; }): { authToken: string; } & TypedAction<"[登录页面]登录成功">'.ts(2345)

Answer 1

尝试使用ActionType<typeof loginSuccessful> ：

import { ActionType } from "@ngrx/store";

// ...

function onLoginSuccess(state: AuthState, action: ActionType<typeof loginSuccessful>): AuthState {
  return {
    ...state,
    authToken: action.authToken
  };
}