调用getReloadAction()时Ngrx Action为何返回undefined？

核心原因 #

你遇到的问题几乎可以确定是**NgrxClass的实例被重新初始化**了。比如在Angular中，如果这个类是组件级注入的依赖（未设置单例），或者每次调用时都通过new NgrxClass()创建新实例，那么执行load的实例和调用getReloadAction的实例根本不是同一个，后者的_reloadAction自然会是undefined。

解决方案 #

1. 确保NgrxClass为全局单例（Angular场景） #

如果是Angular项目，将类注册为全局单例服务，保证整个应用只有一个实例：

@Injectable({ providedIn: 'root' }) // 关键配置：全局单例
export class NgrxClass {
    public _reloadAction: Action;

    constructor(private _store: Store<VehicleState>) {}

    public load(vId?: number): void {
        this._reloadAction = VehiclesLoadAction({ vId });
        this._store.dispatch(this._reloadAction);
    }

    public getReloadAction(): Action {
        return this._reloadAction;
    }
}

2. 避免重复创建实例（非Angular场景） #

如果不是Angular环境，确保在业务流程中只创建一次NgrxClass实例并复用：

// 在全局/共享作用域创建唯一实例
const ngrxInstance = new NgrxClass(storeInstance);

// 业务代码中统一使用该实例
ngrxInstance.load(123);
const action = ngrxInstance.getReloadAction(); // 此时能获取到正确的Action实例

禁止在调用load和getReloadAction的位置分别new新实例。

3. 备选方案：用Ngrx状态存储替代类属性 #

如果不想依赖单例机制，可以把reloadAction的信息存入Ngrx状态，这样无论哪个实例都能从Store中获取：

// 先扩展VehicleState，添加存储action的字段
export interface VehicleState {
    // 原有状态字段...
    reloadAction?: Action;
}

// 修改NgrxClass逻辑
export class NgrxClass {
    constructor(private _store: Store<VehicleState>) {}

    public load(vId?: number): void {
        const action = VehiclesLoadAction({ vId });
        this._store.dispatch(action);
        // 将action存入Store状态
        this._store.dispatch({
            type: 'SET_RELOAD_ACTION',
            payload: action
        });
    }

    public getReloadAction(): Observable<Action | undefined> {
        // 从Store中读取，不再依赖类实例属性
        return this._store.select(state => state.reloadAction);
    }
}

这种方式更贴合Ngrx的状态管理思路，不依赖实例唯一性。

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