如何將狀態更改操作提取到具有型別引數的命名函式？NgRx，角度

有沒有辦法創建一個命名狀態更改函式，具有適當的引數型別，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<" { authToken: 字串；}) => { authToken: 字串；} & TypedAction<"[登錄頁面]登錄成功">>'. 輸入 '{ authToken: 字串; } & TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不可分配給型別 '(props: { authToken: string; }) => { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'。輸入 '{ authToken: 字串; } & TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不匹配簽名 '(props: { authToken: string; }): { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'.ts(2345) { authToken: 字串；}) => { authToken: 字串；} & TypedAction<"[登錄頁面]登錄成功">>'. 輸入 '{ authToken: 字串; } & TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不可分配給型別 '(props: { authToken: string; }) => { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'。輸入 '{ authToken: 字串; } & TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不匹配簽名 '(props: { authToken: string; }): { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'.ts(2345) TypedAction<"[登錄頁面] 登錄成功">>'. 輸入 '{ authToken: 字串; } & TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不可分配給型別 '(props: { authToken: string; }) => { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'。輸入 '{ authToken: 字串; } & TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不匹配簽名 '(props: { authToken: string; }): { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'.ts(2345) TypedAction<"[登錄頁面] 登錄成功">>'. 輸入 '{ authToken: 字串; } & TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不可分配給型別 '(props: { authToken: string; }) => { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'。輸入 '{ authToken: 字串; } & TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不匹配簽名 '(props: { authToken: string; }): { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'.ts(2345) TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不可分配給型別 '(props: { authToken: string; }) => { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'。輸入 '{ authToken: 字串; } & TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不匹配簽名 '(props: { authToken: string; }): { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'.ts(2345) TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不可分配給型別 '(props: { authToken: string; }) => { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'。輸入 '{ authToken: 字串; } & TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不匹配簽名 '(props: { authToken: string; }): { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'.ts(2345) TypedAction<"[登錄頁面] 登錄成功">'。輸入 '{ authToken: 字串; } & TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不匹配簽名 '(props: { authToken: string; }): { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'.ts(2345) TypedAction<"[登錄頁面] 登錄成功">'。輸入 '{ authToken: 字串; } & TypedAction<"[登錄頁面] 登錄成功"> & { type: "[登錄頁面] 登錄成功"; }' 不匹配簽名 '(props: { authToken: string; }): { authToken: string; } & TypedAction<"[登錄頁面]登錄成功">'.ts(2345)

uj5u.com熱心網友回復：

嘗試使用ActionType<typeof loginSuccessful>：

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

// ...

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

標籤：javascript 有角的 打字稿 还原 ngrx

上一篇：如何根據條件以角度禁用工具提示

下一篇：如何在除錯時查看哪些Observables未完成