Ngrx после сброса хранилища, компонент отправляет действие

Question

Я установил Магазин для своего приложения. После выхода из системы я хочу сбросить хранилище. Но есть проблема.

Предположим, у меня есть следующее состояние:

subjects: {
    subjectsLoaded: true
}

В компоненте я подписываюсь на магазин следующим образом:

 this.store.pipe(
        select(areSubjectsLoaded),
         tap((subjectsLoaded) => {
             if (!subjectsLoaded) {
                 this.store.dispatch(loadSubjects());
                 console.log('Dispatching Subjects because they are not Loaded');
             }
         }),
         filter(subjectsLoaded => subjectsLoaded),
         takeUntil(this.unsubscribe$)
     ).subscribe();

После выхода из системы и перезагрузки хранилища это будет выглядеть так:

 subjects: {
    subjectsLoaded: false
}

Поскольку я подписан на изменения в компоненте, будет выполнена отправка действий. Но я не знаю, как этого избежать. Так же использую takeUntil, чтобы не получать данные после уничтожения компонента

Есть небольшая демонстрация:

Для очистки магазина я использую metaReducers:

export const metaReducers: MetaReducer<AppState>[] = [clearState];

export function clearState(reducer: ActionReducer<AppState>): ActionReducer<AppState> {
  return (state: AppState, action: Action): AppState => {
    if (action.type === '[Toolbar] User Logout') {
      console.log('Clear state: ',state);
      state = undefined;
    }
    return reducer(state, action);
  };
}

Answer 1

Я думаю, вам придется использовать что-то еще, кроме undefined, потому что, как вы видели, вы больше не можете различать guish 'состояние не было инициализировано' и 'состояние должно сбрасываться' .

Вы можете использовать symbol, чтобы различать эти состояния .

export const RESET_STATE = Symbol('reset state');

// your meta-reducer
state = RESET_STATE;

return state;

Теперь вы можете распознать их так:

this.store.pipe(
  filter(state => state !== RESET_STATE),
  select(areSubjectsLoaded),
  /* ... */
)

Если вы не хотите повторяться, вы можете создать селектор из этого logi c и использовать его также в других ваших селекторах.