Angular Ngrx：从 Java API 获取和显示选项列表

Question

Java API 将是 - localhost://company/products/123/fetchOptions 它的响应如下所示：

{ 
 "Increase": true,
 "Decrease" : true,
 "Like" : true,
 "Dislike" : true,
 "Old" : false,
 "Others" : true
}

现在 UI 使用 Angular 和 ngrx 我需要包括更改以从上方获取数据 API 并将上方的所有 6 个值显示为 下拉选项.

布尔值为 false 的值将显示在下拉列表中，但会被禁用。

如何使用 Ngrx 做到这一点？

我知道一点，首先我需要定义接口，然后是任何动作，然后是它的调度程序，这样我就可以在我的 UI 组件 (productAttributes.component.ts) 中订阅它。

我的界面和其他东西会怎么样？目前使用JSON准备一切，稍后将JSONurl替换为API

在此先感谢您的帮助...

Answer 1

您需要：

为其创建商店功能
定义一个减速器
定义一个选择器
创建加载操作
创建成功操作
创建失败操作
创造效果

减速器


export const optionsFeatureKey = 'options';

export const optionsLoad = createAction(
    'options:load',
);

export const optionsSuccess = createAction(
    'options:success',
    props<{data: OptionsState}>(),
);

export const optionsFailure = createAction(
    'options:failure',
);


export interface OptionsState {
    Increase: boolean;
    Decrease: boolean;
    Like: boolean;
    Dislike: boolean;
    Old: boolean;
    Others: boolean;
}

export const initialState: OptionsState = {
    Increase: false,
    Decrease: false,
    Like: false,
    Dislike: false,
    Old: false,
    Others: false,
};

const reducer = createReducer(
    initialState,

    on(optionsSuccess, (state, {data}) => ({
        ...state,
        ...data,
    })),

);

export function optionsReducer(state: OptionsState | undefined, action: Action): OptionsState {
    return reducer(state, action);
}

export const optionsFeature = createFeatureSelector<OptionsState>(optionsFeatureKey);

export const getOptions = createSelector(
    optionsFeature,
    v => v,
);

效果


@Injectable()
export class OptionsEffects {
    public readonly load$: Observable<Action> = createEffect(() =>
        this.actions$.pipe(
            ofType(optionsLoad),
            switchMap(() => this.http.get<OptionsState>(`url.com`).pipe(
                map(data => optionsSuccess({data: data})),
                catchError(() => of(optionsFailure())),
            ),
        ),
    );

    constructor(
        protected readonly actions$: Actions,
        protected readonly http: HttpClient,
    ) {}
}

以及您应用中的某处

store.dispatch(optionsLoad());

store.select(getOptions).subscribe(options => {
  // logic.
});

Angular Ngrx：从 Java API 获取和显示选项列表

Angular Ngrx: Getting & displaying list of options from Java API

javascript

typescript

ngrx

angular