如何避免使用NGRX的不确定观察到？

Question

在我的项目中，我尝试集成NGRX商店， 即以前的应用程序体系结构尚未考虑到这一点。

如文档中所述，通常的方法始终是填充来自商店“从一开始”的可观察到的组件。

即使以后数据到达，也已经存在可观察到的。

但是在我的应用程序中，有经常的方案只能将数据称为“按下按钮”。 只有这样，相应的观察物才能发挥作用。

在下面的示例中，我显示了一个虚拟的组件，该组件暗示了一个昵称，但仅在按下按钮时“定义”可观察的。 我这样做是为了使我不必在模板本身中对观察物的存在进行任何案例区分（即测试它们是否不确定）。

但是，在我看来，这似乎是在思考角度的想法，因为我完全没有异步管道。 NGRX对如何处理这种情况有定义吗？我什么都找不到。

@Component({
    template: '
    <input type="text" #seedInput></input>
    <span>{{currentNicknameSuggestion}}</span>
    <button (click)="loadANewNickName(seedInput.nativeElement.value)">new suggestion please!</button>
    '
})
export class NicknameSuggestingComponent {

    newNickname$: Observable<string> | undefined;
    currentNicknameSuggestion: string = 'No idea yet...'; // placeholder which is mandatory due to customer specifications

    constructor(private store: Store<{}>) {}

    /*
    * When the user clicks "new suggestion please!"-button
    */
    loadANewNickName(_seed: string) {
        // this triggers an ngrx/effect which loads a nickname string via http
        // and then when the loadANicknameSuccess-Actions will get recieved by the reducer,
        // a new suggestion will be placed in the store
        this.store.dispatch(loadANewNickname({seed:_seed}));

        // selector for the suggestion in the store
        this.newNickname$ = this.store
        .select(selectNicknameSuggestion)
        .pipe(
            tap(name => this.currentNicknameSuggestion = name)
        );

        // because i don't want to use the async pipe in the template
        // I have to manually descripe to the observable here
        // Thats because I don't want to blow up the template with case destinctions
        // (does newNickname$ is undefined or not)
        this.newNickname$.subscribe();
    }
}

Answer 1

从您的描述和示例中，我没有任何理由不简化此代码并完全摆脱您的“未定义”可观察到的。根本没有用例，您实际上在代码中使用了其“未定义”状态。

请注意，商店中的任何内容 - 无论用户是否已经单击了按钮 -​​ 您 still 始终在模板中呈现一些字符串值（占位符还是已加载的值）。为什么不将商店从一开始就将其初始化使用，然后只是始终渲染商店目前实际返回的任何东西呢？

// ngrx reducer:
export const initialState: State = {
  nicknameSuggestion: 'No idea yet...' // initial state value goes here
};
export const nicknameState = createReducer(
  initialState,
  ...
}


// component:

@Component({
    template: '
    <input type="text" #seedInput></input>
    <span>{{currentNicknameSuggestion$ | async}}</span>
    <button (click)="loadANewNickName(seedInput.nativeElement.value)">new suggestion please!</button>
    '
})
export class NicknameSuggestingComponent {

    // no additional synchronous properties storing Observable values
    newNickname$: Observable<string>; // no need for undefined 

    constructor(private store: Store<{}>) {
    // select from the store, 
    // then let async pipe always render whatever is there
        this.newNickname$ = this.store.select(selectNicknameSuggestion);}
    }

    loadANewNickName(_seed: string) {
        // loads a nickname and adds it to the store
        this.store.dispatch(loadANewNickname({seed:_seed}));
        
    }
}