Начальное состояние Redux, полное нулевых значений в Angular

На мой взгляд, это присуще Redux. Концептуально Redux — это архитектура, которая побуждает вас думать о своем пользовательском интерфейсе как о чистом вычислении всего состояния в любой момент времени. Все ваше приложение — это один большой конечный автомат. Поэтому, если вы установите начальное значение null, первое значение этого выбора будет null. Если вы вообще не устанавливаете начальное значение для поля, то первым значением соответствующего выбора будет undefined.

Таким образом, Redux как бы «выравнивает время» в вашем приложении и учитывает его. Есть только текущее состояние и следующее действие. Именно это фундаментальное предположение делает средства отладки такими мощными.

Мы могли бы заставить наши Observables «ждать до первого значения, отличного от нуля», до срабатывания, но это именно та временная зависимость, которую я лично использую Redux, чтобы избежать. Я чувствую, что внесение этого изменения в библиотеку Angular-Redux/store, вероятно, не является правильным решением, учитывая, что другие люди, вероятно, этого не ожидают. Я также не уверен, как это повлияет на путешествия во времени и другие инструменты отладки.

Итак, в вашем случае, какие есть более чистые способы справиться с такими ситуациями?

Как правило, я бы рассмотрел один из следующих вариантов:

1) убедитесь, что ваши редукторы всегда имеют начальное состояние.

Это работает в тех случаях, когда у вас действительно есть разумная первоначальная стоимость ключа. Итак, для любого редуктора, управляющего state.myUndefined, вы делаете

const INITIAL_VALUE = 'some-reasonable-value';
const myUndefinedReducer = (state = 'some-reasonable-value', action) => {
    // etc.
};

Таким образом, вы кодируете значение по умолчанию в самом редукторе.

2) Обработать его при выборе

Это работает для выборок, которые не связаны напрямую со свойством хранилища (например, они являются результатом некоторых вычислений RxJS). Это также работает для случаев, когда начальное значение ключа является динамическим, например. значение, равное undefined, пока вызов API не заполнит его или подобное.

Как вы заметили, это по существу сводится к созданию фильтров в нескольких местах, что может быть многословным. Однако в вашем примере вы могли бы реализовать его более аккуратно, используя select$ и a Transformer:

Некоторый файл Utils:

export const skipNil = (obs$: Observable<any>): Observable<any> =>
    obs$.filter(v => v !== null && v !== undefined);

Компонент.ts:

@select$('myUndefined', skipNil) myUndefined$: Observable<any>;
@select$(['myObjects', 'country'], skipNil) country$: Observable<any>;