NgRx/Angular中如何提取带类型参数的命名状态变更函数供reducer的on方法使用

报错原因 #

你给onLoginSuccess的第二个参数action指定的类型是错误的：typeof loginSuccessful是「action创建函数本身」的类型，而on方法传给reducer回调的是「调用这个action创建函数后返回的action对象」的类型，二者完全不匹配，所以触发了TS类型报错。

修复方案 #

用NgRx提供的ActionType工具类型获取对应action对象的类型即可，修改后的代码如下：

// 首先导入ActionType工具，来自@ngrx/store
import { ActionType } from '@ngrx/store';

// 修正onLoginSuccess的action参数类型
function onLoginSuccess(state: AuthState, action: ActionType<typeof loginSuccessful>): AuthState {
    return {
        ...state,
        authToken: action.authToken
    };
}

如果不想额外导入工具类型，也可以直接用TS内置的ReturnType实现相同效果：

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

修改后再把onLoginSuccess传入on方法就不会再触发类型报错，完全可以正常使用命名的状态变更函数。

内容的提问来源于stack exchange，提问作者mimo