Проверьте данные в Angular Store перед вызовом API с помощью NGRX с использованием наблюдаемых - PullRequest
Новая
       8

Проверьте данные в Angular Store перед вызовом API с помощью NGRX с использованием наблюдаемых

0 голосов
/ 05 июня 2018

Я использую Angular с эффектами NGRX, и я новичок в мире наблюдаемых.Я хочу проверить, что если данные существуют в моем хранилище, то API-интерфейс не должен вызываться, а данные должны извлекаться из хранилища.Мне удалось найти, что я могу использовать withLatestFrom (), который может проверить последнее значение в магазине.Следующая часть сбивает меня с толку, и я не могу заставить его работать.Мой текущий код ниже: 

 @Effect() getSomeContent$ = this.actions$
    .ofType(GET_SOME_CONTENT)
    .withLatestFrom(this.store$.select('store-section'))
    .map(([action, store]) => {
        const content = {};
        if (store.someContent.length > 0) {
           return new GetCategoryContentSuccessAction({ categoryContent: categories });
        }
        return Observable.from(action.payload);
    })
    .switchMap(payload => this.APIcall(payload)
        .then(data => {
            const content = {};
            data.items.map((item) => {
                const slug = data.slug;
                content[slug] = {
                    info: datasomeData
                };
            });
            return new GetSomeContentSuccessAction({ categoryContent: categories });
        })
        .catch((err) => {
            return new GetFailureAction({ error: {} });
        })
    );

Я хочу использовать какой-то оператор if или else для проверки магазина.Если данные существуют, я хочу отправить пустой объект обратно для редуктора, который я должен обработать.Если это не так, я хочу вызвать API и отправить эти данные обратно.Я не знаю, может ли наблюдаемое быть разветвленным другими словами, чтобы это можно было сделать?

Есть ли лучший способ, которым это могло бы быть достигнуто?Возможно, путем создания другого действия, чтобы иметь дело с API отдельно.Я хотел бы узнать, каковы лучшие практики в будущем.Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 28 сентября 2018

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

Есть отличная статья Стоит использоватьЭффекты NGRX для этого .Это говорит о том, насколько сложно попытаться втиснуть это в цепочку эффектов ngrx.

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

Service: 

public posts$ = this.store.select(postSelectors.selectAll)
    .pipe(
        tap(posts => {
            if (!posts.length) {
                this.store.dispatch(new postActions.LoadMany());
            }
        }),
        filter(posts => posts !== null)
    );

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

Component: 

this.posts$ = this.postService.posts$;

Тогда в своем компоненте вы можете просто подписаться на наблюдаемое из вашего сервиса и не заботиться о том, находится он в магазине или нет.Затем вы можете либо подписаться на это в своем компоненте, чтобы получить значение, либо отправить его в шаблон с помощью асинхронного канала.

Это очень хорошо работает для простых вещей, но я все еще работаю над более сложными цепочками RXJS длякогда вы должны получить данные, которые зависят от других данных, чтобы существовать в первую очередь.Но это всего лишь ограничение моих способностей при написании функций RXJS.

...